<template>
  <div class="mod-config leadInfo" style="font-family:Arial;">
    <a-breadcrumb class="location">
      <a-breadcrumb-item>Leads</a-breadcrumb-item>
      <a-breadcrumb-item>Lead</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 用户信息 -->
    <el-row class="headBox clearfix">
      <el-col class="pic">
        <img src="~@/assets/img/leads-usertx.png" alt="">
      </el-col>

      <el-col class="user" :span="9">
        <el-row class="nm">
          <span class="name">{{userObj.username}}</span>
          {{userObj.email}}
          <div class="flags" @click="clearNewFlagHandle" v-show="userObj.newFlag">
            New Lead - action needed
            <div class="new">Clear New Flag</div>
          </div>
        </el-row>

        <el-row class="infos">
          <el-col class="start" :span="10" v-if="userObj.useStartDate">
            <span class="txt">Start Date</span>
            {{ dateFormatEN(userObj.useStartDate)}}
          </el-col>
          <el-col class="active" :span="13" v-if="userObj.useActiveDate">
            <span class="txt">Active Date</span>
            {{ dateFormatEN(userObj.useActiveDate)}}
          </el-col>
        </el-row>
      </el-col>

      <el-col class="rbox clearfix" :span="2">
        <div class="item" @click="showPhoneModal">
          <img src="~@/assets/img/call.png" alt="">
        </div>
        <div class="item" @click="showDrawer">
          <img src="~@/assets/img/open.png" alt="">
        </div>
      </el-col>
    </el-row>

    <!-- 弹窗: 电话 -->
    <a-modal v-model="CallPhonevisible" :footer="null">
      <div class="mobileModal">
        <div class="tit">Phone Number</div>
        <div class="mob">{{userObj.phone}}</div>
      </div>
    </a-modal>
    
    <!-- 详细信息 -->
    <a-drawer
      :placement="placement"
      :closable="true"
      @close="onClose"
      :visible="visible"
      :zIndex="drawzIndex"
      width="1080"
      class="tcinfo"
    >
      <div class="drawBox">
        <a-row :gutter="30" class="topinfos">
          <a-col :span="9" class="lbaseInfo">
            <a-form class="formBox">
              <!-- First name -->
              <a-form-item label="" class="items">
                <div class="text">First name</div>
                <a-input class="ipt" allowClear @blur="changeUTfirstname" v-model="userObj.leadCttFirstname"/>
              </a-form-item>
              
              <!-- Last name -->
              <a-form-item label="" class="items">
                <div class="text">Last name</div>
                <a-input class="ipt" allowClear @blur="changeUTlastname" v-model="userObj.leadCttLastname"/>
              </a-form-item>
              
              <!-- phone number -->
              <a-form-item label="" class="items">
                <div class="text">Phone Number</div>
                <a-input class="ipt" allowClear @blur="changeUTphoneNumber" v-model="userObj.phone"/>
              </a-form-item>

              <!-- email -->
              <a-form-item label="" class="items">
                <div class="text">Email</div>
                <a-input class="ipt" allowClear @blur="changeUTEmail" v-model="userObj.email"/>
              </a-form-item>

              <!-- location -->
              <!-- <a-form-item label="" class="items">
                <div class="text">Location</div>
                <a-input class="ipt" allowClear />
              </a-form-item> -->

              <!-- Local Time -->
              <!-- <a-form-item label="" class="items tm">
                <div class="text">Local Time</div>
                <a-input class="ipt" allowClear v-model="userObj.createTime"/>
              </a-form-item> -->

              <!-- logo -->
              <!-- <div class="logos clearfix" style="margin-top: 135px;">
                <div class="inx">
                  <img src="~@/assets/img/FB.png" alt="" class="photo"/>
                  <img src="~@/assets/img/T.png" alt="" class="photo"/>
                  <img src="~@/assets/img/in.png" alt="" class="photo"/>
                </div>
              </div> -->
            </a-form>
          </a-col>

          <a-col :span="9" class="middleInfo">
            <a-form class="formBox">
              <!-- Alt Phn -->
              <a-form-item label="" class="items">
                <div class="text">Alt Phn</div>
                <a-input class="ipt" allowClear @blur="changeUTAltPhn" v-model="userObj.leadAdtnAltPhn"/>
              </a-form-item>
              
              <!-- Office -->
              <a-form-item label="" class="items">
                <div class="text">Office</div>
                <a-input class="ipt" allowClear @blur="changeUTOffice" v-model="userObj.leadAdtnOffice"/>
              </a-form-item>

              <!-- Fax -->
              <a-form-item label="" class="items">
                <div class="text">Fax</div>
                <a-input class="ipt" allowClear @blur="changeUTFax" v-model="userObj.leadAdtnFax"/>
              </a-form-item>

              <!-- Address  -->
              <a-form-item label="" class="items">
                <div class="text">Address</div>
                <a-input class="ipt" allowClear @blur="changeUTAddress" v-model="userObj.leadAdtnAddress"/>
              </a-form-item>

              <!-- City -->
              <a-form-item label="" class="items citys">
                <a-row :gutter="10" class="inrow">
                  <a-col class="theone" :span="7">
                    <div class="text">City</div>
                    <a-input class="ipt" allowClear @blur="changeUTCity" v-model="userObj.leadAdtnCity"/>
                  </a-col>

                  <!-- St -->
                  <a-col class="theone" :span="7">
                    <div class="text">St</div>
                    <a-input class="ipt" allowClear @blur="changeUTStatus" v-model="userObj.leadAdtnState"/>
                  </a-col>
                  
                  <!-- Zip -->
                  <a-col class="theone" :span="7">
                    <div class="text">Zip</div>
                    <a-input class="ipt" allowClear @blur="changeUTZip" v-model="userObj.leadAdtnZip"/>
                  </a-col>
                  
                </a-row>
              </a-form-item>

              <div class="importa" @click="showImportDateModal">
                <img src="~@/assets/img/add-bgwhite.png" alt="" class="pic"/>
                Important Date
              </div>
            </a-form>
          </a-col>

          <a-col :span="6" class="rigInfo">
            <a-form class="formBox">
              <!-- Type -->
              <a-form-item label="" class="items">
                <div class="text">Type</div>
                <div class="leadinfo-type">
                  <el-select placeholder="select" v-model="userObj.leadDtlType" @change="changeUBType">
                    <el-option v-for="(item9, index9) in leadTypeList" :value="item9" :key="index9"></el-option>
                  </el-select>
                </div>
              </a-form-item>
              
              <!-- Status -->
              <a-form-item label="" class="items">
                <div class="text">Status</div>
                <div class="leadinfo-type">
                  <el-select placeholder="select" v-model="userObj.leadDtlStatus" @change="changeUBStatus">
                    <el-option v-for="(item10, index10) in leadStatusList" :value="item10" :key="index10"></el-option>
                  </el-select>
                </div>
              </a-form-item>

              <!-- Area 输入 -->
              <a-form-item label="" class="items">
                <div class="text">Area</div>
                <a-input class="ipt" allowClear @blur="changeUBArea" v-model="userObj.leadDtlArea"/>
              </a-form-item>

              <!-- Timeframe  -->
              <a-form-item label="" class="items">
                <div class="text">Timeframe</div>
                <div class="leadinfo-type">
                  <el-select placeholder="select" v-model="userObj.leadDtlTimeframe" @change="changeUBTimeframe">
                    <el-option v-for="(item11, index11) in leadTimeframeList" :value="item11" :key="index11"></el-option>
                  </el-select>
                </div>
              </a-form-item>

              <!-- Urgency  -->
              <a-form-item label="" class="items">
                <div class="text">Urgency</div>
                <div class="leadinfo-type">
                  <el-select placeholder="select" v-model="userObj.leadDtlUrgency" @change="changeUBUrgency">
                    <el-option v-for="(item12, index12) in leadUrgencyList" :value="item12" :key="index12"></el-option>
                  </el-select>
                </div>
              </a-form-item>

              <!-- Agent  -->
              <a-form-item label="" class="items">
                <div class="text">Agent</div>
                <div class="leadinfo-type">
                  <el-select placeholder="select" v-model="userObj.leadDtlAgent" @change="changeUBAgent">
                    <el-option v-for="(item55, index55) in getFollowUserList" :label="item55.label" :value="item55.username" :key="index55"></el-option>
                  </el-select>
                </div>
              </a-form-item>

            </a-form>
          </a-col>
        </a-row>
        
        <!-- 次级联系人 -->
        <div class="botInfos">
          <!-- tab -->
          <div class="tab clearfix">
            <div class="item" :class="[item6.active ? 'active' : '', index6 == '1' ? 'item2' : (index6 == '2' ? 'item4' : '') ]" @click="changeBottomTab(index6)" v-for="(item6, index6) in tcBotNavList" :key="index6">
              <img src="~@/assets/img/arr-down.png" alt="" class="pic" v-if="item6.active"/>
              <img src="~@/assets/img/arr-right.png" alt="" class="rigpic" v-else/>
              {{item6.title}}
              <span v-show="index6 == 2">:{{userTagList.length}}</span>
              <div class="fdtxt" v-show="(index6 == 0 || index6 == 1)">NONE</div>
            </div>
          </div>

          <!-- 显示 -->
          <div class="showBoxes">
            <!-- Secondary Contact -->
            <div class="box1 clearfix" v-show="showTcUserInfoNum == 1">
              <div class="item">
                <div class="tit">Name</div>
                <div class="xl">
                  <a-input class="ipt" allowClear @blur="changeBSCName" v-model="userObj.leadScName"/>
                </div>
              </div>

              <div class="item">
                <div class="tit">Cell</div>
                <div class="xl">
                  <a-input class="ipt" allowClear @blur="changeBSCCell" v-model="userObj.leadScCell"/>
                </div>
              </div>

              <div class="item item3">
                <div class="tit">Address</div>
                <div class="xl">
                  <a-input class="ipt" allowClear @blur="changeBSCAddress" v-model="userObj.leadScAddress"/>
                </div>
              </div>

              <div class="item">
                <div class="tit">Phone</div>
                <div class="xl">
                  <a-input class="ipt" allowClear @blur="changeBSCPhone" v-model="userObj.leadScPhone"/>
                </div>
              </div>

              <div class="item">
                <div class="tit">Office</div>
                <div class="xl">
                  <a-input class="ipt" allowClear @blur="changeBSCOffice" v-model="userObj.leadScOffice"/>
                </div>
              </div>

              <div class="item moreIt clearfix">
                <div class="nbbox">
                  <div class="tit">City</div>
                  <div class="xl">
                    <a-input class="ipt" allowClear @blur="changeBSCCity" v-model="userObj.leadScCity"/>
                  </div>
                </div>

                <div class="nbbox">
                  <div class="tit">St</div>
                  <div class="xl">
                    <a-input class="ipt" allowClear @blur="changeBSCStatus" v-model="userObj.leadScState"/>
                  </div>
                </div>

                <div class="nbbox">
                  <div class="tit">Zip</div>
                  <div class="xl">
                    <a-input class="ipt" allowClear @blur="changeBSCZip" v-model="userObj.leadScZip"/>
                  </div>
                </div>
            
              </div>

              <div class="item">
                <div class="tit">Email</div>
                <div class="xl">
                  <a-input class="ipt" allowClear @blur="changeBSCEmail" v-model="userObj.leadScEmail"/>
                </div>
              </div>

              <div class="item">
                <div class="tit">Fax</div>
                <div class="xl">
                  <a-input class="ipt" allowClear @blur="changeBSCFax" v-model="userObj.leadScFax"/>
                </div>
              </div>
            </div>
           
            <!-- Important Notes -->
            <div class="box2 clearfix"  v-show="showTcUserInfoNum == 2">
              <div class="lz clearfix">
                <div class="item">
                  <div class="tit">Home type</div>
                  <div class="xl">
                    <el-select placeholder="select" v-model="userObj.leadIpttHome" @change="changeUBINHometype">
                      <el-option v-for="(item13, index13) in leadHomeList" :value="item13" :key="index13"></el-option>
                    </el-select>
                  </div>
                </div>

                <div class="item">
                  <div class="tit">Minimum price</div>
                  <div class="xl">
                    <el-select placeholder="select" v-model="userObj.leadIpttMinPrice" @change="changeUBINMinimumprice">
                      <el-option v-for="(item14, index14) in minimumPriceList" :value="item14" :key="index14">{{item14}}</el-option>
                    </el-select>
                  </div>
                </div>

                <div class="item">
                  <div class="tit">Minimum bedrooms</div>
                  <div class="xl">
                    <el-select placeholder="select" v-model="userObj.leadIpttMinBedrooms" @change="changeUBINMinimumbedrooms">
                      <el-option v-for="(item15, index15) in minimumBedroomsList" :value="item15" :key="index15">{{item15}}</el-option>
                    </el-select>
                  </div>
                </div>

                <div class="item">
                  <div class="tit">Maximum price</div>
                  <div class="xl">
                    <el-select placeholder="select" v-model="userObj.leadIpttMaxPrice" @change="changeUBINMaximumprice">
                      <el-option v-for="(item16, index16) in maximumPriceList" :value="item16" :key="index16">{{item16}}</el-option>
                    </el-select>
                  </div>
                </div>

                <div class="item">
                  <div class="tit">Minimum bathrooms</div>
                  <div class="xl">
                    <el-select placeholder="select" v-model="userObj.leadIpttMinBathrooms" @change="changeUBINMinimumbathrooms">
                      <el-option v-for="(item17, index17) in minimumBathroomsList" :value="item17" :key="index17">{{item17}}</el-option>
                    </el-select>
                  </div>
                </div>

                <div class="item">
                  <div class="tit">Square footage</div>
                  <div class="xl">
                    <el-select placeholder="select" v-model="userObj.leadIpttSquFootage" @change="changeUBINSquarefootage">
                      <el-option v-for="(item18, index18) in squareFootageList" :value="item18" :key="index18">{{item18}}</el-option>
                    </el-select>
                  </div>
                </div>
              
              </div>

              <div class="ry">
                <div class="notes">
                  <div class="tit">Notes</div>
                  <div class="xl">
                    <a-textarea placeholder="" @blur="changeUBINNotes" v-model="userObj.leadAdtnNotes" clearable :rows="5" class="noteTextArea" />
                  </div>
                </div>
              </div>

            </div>
            
            <!-- Source:Ret:(I.Instagram) -->
            <div class="box3 clearfix"  v-show="showTcUserInfoNum == 4">
              111
            </div>
            
            <!-- tags -->
            <div class="box4 clearfix"  v-show="showTcUserInfoNum == 3">
              <div class="bxs clearfix">
                <div class="linput">
                  <a-input placeholder="Add Tag" allowClear v-model="newTagName"/>
                </div>
                <div class="rbtn" @click="addUserTagHandle">
                  Add
                </div>
              </div>

              <div class="list">
                <div class="titem" v-for="(item31, index31) in userTagList" :key="index31">
                  {{item31}}
                  <div class="pic" @click="deleteTheTag(index31)">
                    <img src="~@/assets/img/close_pic.png" alt="" class="img">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作 -->
        <!-- <div class="caozuo clearfix">
          <div class="inb clearfix">
            <a-button class="done" type="primary" @click="SubmitHandle">Done</a-button>
            <a-button class="cancel" @click="cancelHandle">CANCEL</a-button>
          </div>
        </div> -->
        
        <!-- 弹窗 -->
        <div class="importDateTc" v-show="importantDateVisible">
          <div class="content">
            <!-- 关闭 -->
            <div class="close">
              <span>Add Important Date</span>
              <img src="~@/assets/img/close.png" alt="" class="pic" @click="closeIptDateHandle"/>
            </div>

            <div class="dateinfomation clearfix">
              <a-row class="typeed">
                <a-col :span="4" class="txt">Type</a-col>
                <a-col :span="19" class="rbox">
                  <el-select placeholder="select" v-model="importantDateForm.type" class="dropbox">
                    <el-option v-for="(item23, index23) in getImportantDateTypeList" :value="item23" :key="index23"></el-option>
                  </el-select>
                </a-col>
              </a-row>

              <a-row class="tmdate">
                <a-col :span="4" class="txt">Time</a-col>
                <a-col :span="19" class="rbox">
                  <a-date-picker showTime @change="selectImportDateTime" class="tmpicker tmpicker1">
                    <template slot="renderExtraFooter"></template>
                  </a-date-picker>
                </a-col>
              </a-row>

              <a-row class="notes">
                <a-col :span="4" class="txt">Notes</a-col>
                <a-col :span="19" class="rbox">
                  <a-textarea placeholder="" v-model="importantDateForm.notes" clearable :rows="5" class="noteTextArea" />
                </a-col>
              </a-row>

              <a-row class="addToFollow">
                <a-checkbox @change="onChangeAddtocalendar">Add to calendar as follow-up</a-checkbox>
              </a-row>

              <div class="save" @click="addNewImportantDate">
                Save
              </div>
      
            </div>
          </div>
        </div>

      </div>
    </a-drawer>

    <!-- 备注 -->
    <div class="bezBox">
      <a-row class="remarks" :gutter="30">
        <!-- ac -->
        <a-col :span="7" class="r-item laddInf">
          <div class="ite">
            <!-- tab -->
            <a-row>
              <a-col :span="8" class="m" :class="item2.active ? 'active' : '' " v-for="(item2, index2) in typeList" :key="index2" @click.native="changeTypes(index2)">
                {{item2.title}}
              </a-col>
            </a-row>

            <!-- Activity -->
            <div class="activities clearfix" v-if="showType == 0">
              <a-row class="typeed">
                <a-col :span="4" class="txt">Type</a-col>
                <a-col :span="19" class="rbox">
                  <el-select placeholder="select" v-model="activityForm.type" class="dropbox">
                    <el-option v-for="(item3, index3) in getActTypeList" :value="item3" :key="index3"></el-option>
                  </el-select>
                </a-col>
              </a-row>

              <a-row class="tmdate">
                <a-col :span="4" class="txt">Time</a-col>
                <a-col :span="19" class="rbox">
                  <a-date-picker showTime @change="selectAcTime" class="tmpicker tmpicker2">
                    <template slot="renderExtraFooter"></template>
                  </a-date-picker>
                </a-col>
              </a-row>

              <a-row class="notes">
                <a-col :span="4" class="txt">Notes</a-col>
                <a-col :span="19" class="rbox">
                  <a-textarea placeholder="" v-model="activityForm.notes" clearable :rows="5" class="noteTextArea" />
                </a-col>
              </a-row>

              <div class="save" @click="addActivityHandle()">
                Save
              </div>
      
            </div>

            <!-- Follow-up -->
            <div class="follow clearfix" v-if="showType == 1">
              <a-row class="user">
                <a-col :span="4" class="txt">User</a-col>
                <a-col :span="19" class="rbox">
                  <el-select placeholder="select" v-model="followUpForm.user" class="dropbox">
                    <el-option v-for="(item4, index4) in getFollowUserList" :value="item4.username" :key="index4">{{item4.username}}</el-option>
                  </el-select>
                </a-col>
              </a-row>

              <a-row class="purpose">
                <a-col :span="4" class="txt">Purpose</a-col>
                <a-col :span="19" class="rbox">
                  <el-select placeholder="select" v-model="followUpForm.purpose" class="dropbox">
                    <el-option v-for="(item5, index5) in getFollowPurposeList" :value="item5" :key="index5"></el-option>
                  </el-select>
                </a-col>
              </a-row>

              <a-row class="followtitle">
                <a-col :span="4" class="txt">Title</a-col>
                <a-col :span="19" class="rbox">
                  <a-input placeholder="" v-model="followUpForm.title" />
                </a-col>
              </a-row>

              <a-row class="interval">
                <a-col :span="4" class="txt">Interval</a-col>
                <a-col :span="19" class="rbox">
                  <a-radio-group name="radioGroup" @change="onRedioChange" v-model="followUpForm.radio" :defaultValue="1">
                    <a-radio :style="radioStyle" :value="1">On A Specific Date</a-radio>
                    <a-radio :style="radioStyle" :value="2">On A Recurring Basis</a-radio>
                  </a-radio-group>
                </a-col>
              </a-row>

              <a-row class="isAllday">
                <a-checkbox @change="onCheckboxChange">Mark as "All Day" event</a-checkbox>
              </a-row>

              <a-row class="tmdate">
                <a-col :span="4" class="txt">Time</a-col>
                <a-col :span="19" class="rbox">
                  <a-date-picker showTime @change="selectFollowTime" class="tmpicker tmpicker3">
                    <template slot="renderExtraFooter"></template>
                  </a-date-picker>
                </a-col>
              </a-row>

              <!-- 重复时间 -->
              <a-row class="repeatTotal" v-show="followUpForm.radio == 2">
                <!-- day -->
                <a-row class="srday">
                  <a-col :span="4" class="txt">Repeat Every</a-col>
                  <a-col :span="19" class="rbox clearfix">
                    <div class="bto">
                      <div class="lb">
                        <a-input class="ipt" v-model="followUpForm.repeatEvery" allowClear/>
                      </div>

                      <div class="sel">
                        <el-select placeholder="select" v-model="followUpForm.repeatDateUnit">
                          <el-option value="Days">Days</el-option>
                          <el-option value="Weeks">Weeks</el-option>
                          <el-option value="Months">Months</el-option>
                          <el-option value="Years">Years</el-option>
                        </el-select>
                      </div>
                    </div>
                  </a-col>
                </a-row>

                <!-- end -->
                <a-row class="tmdate">
                  <a-col :span="4" class="txt">Ending</a-col>
                  <a-col :span="19" class="rbox">
                    <a-date-picker showTime @change="selectEndRepeatTime" class="tmpicker tmpicker4">
                      <template slot="renderExtraFooter"></template>
                    </a-date-picker>
                  </a-col>
                </a-row>
              </a-row>

              <a-row class="notes">
                <a-col :span="4" class="txt">Notes</a-col>
                <a-col :span="19" class="rbox">
                  <a-textarea placeholder="" v-model="followUpForm.notes" :rows="5" class="noteTextArea" />
                </a-col>
              </a-row>

              <a-row class="reminders">
                <a-col :span="4" class="txt">Reminders</a-col>
                <a-col :span="19" class="rbox" @click="addReminderHandle">
                  +Add Reminder
                </a-col>
              </a-row>

              <!-- 提醒 -->
              <div class="tixBox">
                <div class="addbox" v-show="rememinderList.length" v-for="(item7, index7) in rememinderList" :key="index7">
                  <div class="text">Time before</div>
                  <div class="itebox clearfix">
                    <div class="lb">
                      <a-input class="ipt" v-model="item7.val" allowClear/>
                    </div>

                    <div class="sel">
                      <el-select placeholder="select" v-model="item7.timeunit">
                        <el-option value="minutes">minutes</el-option>
                        <el-option value="hours">hours</el-option>
                        <el-option value="days">days</el-option>
                        <el-option value="weeks">weeks</el-option>
                      </el-select>
                    </div>

                    <!-- 删除 -->
                    <div class="deletes" @click="deleteReminderHandle(index7)">
                      <img src="~@/assets/img/shanchu.png" alt="" class="pho"/>
                    </div>
                  </div>
                </div>
              </div>

              <div class="save" @click="addFollowUp">
                Save
              </div>
            </div>

            <!-- Email -->
            <div class="aboutEmail" v-if="showType == 2">
              <div class="boxed" @click="showEmailTempModal">
                <img src="~@/assets/img/leads-add.png" alt="" class="pic"/>
                New Blank Email
              </div>

              <div class="yours">
                <h3 class="tit">Your Email Templates:</h3>
                <div class="list">
                  <div class="item" @click="editOddEmailTemp(item21)" v-for="(item21, index21) in emailTepList" :key="index21">{{index21+1}}. {{item21.etitle}}</div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        
        <!-- Upcoming Follow-ups -->
        <a-col :span="8" class="r-item middleInfo">
          <div class="ite">
            <div class="title">Upcoming Follow-ups</div>

            <div class="list" v-if="userFollowList.length">
              <div class="item" v-for="(item8, index8) in userFollowList" :key="index8">
                <div class="tobox">
                  <div class="title">{{item8.leadId}}</div>
                  <div class="totla">
                    <div class="time">{{item8.actTime}}</div>
                    <div class="note">{{item8.flwTitle}}</div>
                  </div>
                  <div class="type">Call</div>
                </div>

                <div class="repbox">
                  <div class="rw" v-show="item8.repeatEndTime">
                    <div class="ltit">RepeatEndtime</div>
                    <div class="rcontent">{{item8.repeatEndTime}}</div>
                  </div>

                  <div class="rw" v-show="item8.timeBefore">
                    <div class="ltit">Reminders</div>
                    <div class="rcontent">{{item8.reminders}}/4 {{item8.timeBefore}}</div>
                  </div>
                </div>

                <div class="edit">
                  Edit
                </div>

                <div class="maskbox">
                  <div class="con">
                   {{item8.actNotes}}
                  </div>
                </div>
              </div>
            </div>

            <div class="noentries" v-else>
              There are no follow-ups within the next 7 days.
            </div>
          </div>
        </a-col>
        
        <!-- Activity Summary Status -->
        <a-col :span="9" class="r-item rigActivity">
          <div class="ite">
            <div class="title">Activity Summary Stats</div>
            <div class="list clearfix" v-if="activityList.length">
              <div class="item" :class="(index === 6) ? 'teshu' : '' " v-for="(item, index) in activityList" :key="index">
                <div class="tit">{{item.title}}</div>
                <div class="content">
                  {{item.num}}
                  <span v-if="item.type" class="sp">days ago</span>
                </div>
              </div>
            </div>
            <div class="noentries" v-else>
              There are no Activity Summary Stats within the next 7 days.
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- email弹窗 -->
    <a-modal :title="'Compose Email to '+userObj.username" okText="Send" v-model="emailTempvisible" @ok="handleEmailTempOk">
      <div class="emailModal">
        <div class="tinfos">
          <div class="shitem">
            <div class="ltxt">To</div>
            <div class="rshow">
              <a-input class="ipt" v-model="sendEmailForm.to"/>
              <!-- <div class="p">jenny107@msn.com</div> -->
            </div>
          </div>

          <div class="shitem">
            <div class="ltxt">Cc</div>
            <div class="rshow">
              <a-input class="ipt" v-model="sendEmailForm.cc"/>
            </div>
          </div>

          <div class="shitem">
            <div class="ltxt">Subject</div>
            <div class="rshow">
              <a-input class="ipt" v-model="sendEmailForm.subject"/>
            </div>
          </div>

          <div class="shitem">
            <div class="ltxt">Template</div>
            <div class="rshow">
              <el-select placeholder="select" v-model="sendEmailForm.template" @change="showSelectTemplate">
                <el-option v-for="(item22, index22) in emailTepList" :value="item22.etitle" :key="index22"></el-option>
              </el-select>
            </div>
          </div>

        </div>

        <div class="dbody">
          <div class="title">Body</div>
          <div class="conbox mod-demo-ueditor" v-loading="quillUpdateImg">
            
            <!-- 图片上传组件辅助-->
            <el-upload
              class="avatar-uploader"
              :action="serverUrl"
              name="img"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :before-upload="beforeUpload">
            </el-upload>

            <quill-editor
              v-model="detailContent"
              ref="myQuillEditor"
              :options="editorOption"
              @change="onEditorChange($event)"
              @ready="onEditorReady($event)"
              @blur="onEditorBlur($event)" 
              @focus="onEditorFocus($event)"
              id="editor"
            >
            </quill-editor>

          </div>
        </div>


      </div>
    </a-modal>

    <div class="naves">
      <div class="navtab">
        <div class="box">
          <el-col :span="3" class="item" :class="item.active === 1 ? 'active' : '' " v-for="(item, index) in navList" :key="index" @click.native="changeNav" :data-i="index" >{{item.label}}</el-col>
        </div>
      </div>
    </div>

    <el-row style="margin-bottom: 15px;" class="pageAndSearch clearfix" :gutter="16">
      <el-col :span="12" class="lpage" style="height: 40px;">
        <el-pagination
          background
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          :pager-count="pagerCount"
          style="margin: 0; text-align: left; background: #E9EFFF; padding: 5px; border-radius:2px; display: inline-block;"
          layout="prev, pager, next, jumper"
        ></el-pagination>
      </el-col>

      <el-col :span="12" class="rsearch clearfix ssboxes" style="height: 40px;">
        <div class="rsearch">
          <el-input placeholder="" v-model="dataForm.key" clearable type="text" class="sript" @keyup.enter.native="toSearchHandle">
            <el-button slot="append" @click="toSearchHandle" icon="el-icon-search" style="background: #E6E6E6; font-size: 16px; font-weight: 700; color: #17B3A3;"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>

    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%; border: 0;"
      :row-style="tableRowStyle"
      :header-cell-style="firstCellStyle"
      :cell-style="cellStyle"
    >

      <el-table-column prop="userName" header-align="left" align="left" label="Name" class-name="sameColumn">
        <template slot-scope="scope">
          <div class="nmbox">
            <div class="nm">{{scope.row.userName}}</div>
            <div class="contet" v-show="scope.row.optCont">{{scope.row.optCont}}</div>
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="optCont" header-align="left" align="left" label="Notes"  class-name="sameColumn"/> -->
      <el-table-column prop="optDirection" width="270" header-align="left" align="left" label="Activity"  class-name="sameColumn"/>
      <el-table-column
        prop="createTime"
        header-align="left"
        width="300"
        align="left"
        label="Date"
        class-name="sameColumn"
      >
        <template slot-scope="scope">{{dateFormatEN(scope.row.createTime)}}</template>
      </el-table-column>
      
      <!-- <el-table-column width="120" prop="optTag" header-align="center" align="left" label="Action"/>
      <el-table-column
        width="330"
        prop="optCont"
        header-align="center"
        align="left"
        label="ReferUrl"
      />
      <el-table-column
        prop="paramsMap"
        header-align="center"
        align="center"
        label="Request Parameters"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        width="180"
        prop="createTime"
        header-align="center"
        align="center"
        label="Time"
      >
        <template slot-scope="scope">{{dateFormatEN(scope.row.createTime)}}</template>
      </el-table-column> -->
    </el-table>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './browsehistory-add-or-update'
var url = 'http://192.168.1.150:8000/renren-fast/app/imgUpload'
const toolbarOptions = [
  ['bold', 'italic', 'underline'],  // 加粗，斜体，下划线，删除线 'strike'
  [{'color': []}, {'background': []}], // dropdown with defaults from theme
  // ['blockquote', 'code-block'], // 引用，代码块

  [{'header': 1}, {'header': 2}],  // 标题，键值对的形式；1、2表示字体大小
  [{'list': 'ordered'}, {'list': 'bullet'}],  // 列表
  [{'script': 'sub'}, {'script': 'super'}],  // 上下标
  [{'indent': '-1'}, {'indent': '+1'}],  // 缩进
  [{'align': []}],
  [{'direction': 'rtl'}],  // 文本方向

  [{'size': ['small', false, 'large', 'huge']}],  // 字体大小
  [{'header': [1, 2, 3, 4, 5, 6, false]}],  // 几级标题
  [{'font': []}],
  // ['link', 'image'],
  // ['clean']  // remove formatting button
]

export default {
  components: {
    AddOrUpdate
  },
  data () {
    return {
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      userObj: {},
      pageTotal: 30,
      navList: [],
      pagerCount: 5,
      userimg: '~@/assets/img/leads-usertx.png',
      userFollowList: [
        // { 'title': 'mobile', 'content': 'Uncontacted' },
        // { 'title': 'email', 'content': 'has been sent' }
      ],
      activityList: [
        { 'title': 'SEARCHES', 'num': 0 },
        { 'title': 'VISITS', 'num': 0 },
        { 'title': 'PROPS', 'num': 0 },
        // { 'title': 'Saved searches', 'num': 0 },
        { 'title': 'Favorite properties', 'num': 0 },
        { 'title': 'Contact Emails', 'num': 0 },
        { 'title': 'Average Property Price', 'num': '0'},
        { 'title': 'Last Search', 'num': '0', 'type': 1 }
      ],
      visible: false,
      placement: 'right',
      drawzIndex: 9999999999999,
      activiTrigger: ['click'],
      typeList: [
        { 'title': 'Activity', 'icon': '', 'active': 1 },
        { 'title': 'Follow-up', 'icon': '', 'active': 0 },
        { 'title': 'Email', 'icon': '', 'active': 0 },
      ],
      showType: 0,
      firstCellStyle: {
        'fontSize': '16px',
        "fontWeight": '400',
        'color': '#fff',
        'background': '#1890FF',
        'marginRight': '1px'
      },
      form: this.$form.createForm(this, { name: 'register' }),
      selectActType: '',
      // Activity
      getActTypeList: [],
      activityForm: {
        'type': '',
        'time': '',
        'notes': ''
      },
      // Follow-up
      getFollowUserList: [],
      getFollowPurposeList: [],
      followUpForm: {
        'user': '',
        'purpose': '',
        'title': '',
        'radio': 1,
        'ischeckbox': 0,
        'time': '',
        'notes': '',
        'repeatEndTime': '',
        "repeatEvery": '',
        "repeatDateUnit": ''
      },
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      // 详细信息
      rigInfoForm: {
        'type': '',
        'status': '',
        'timeframe': '',
        'urgency': '',
        'agent': '',
        // 下面
        'leadHome': '',
        'minimumPrice': '',
        'minimumBedrooms': '',
        'maximumPrice': '',
        'minimumBathrooms': '',
        'squareFootage': '',
      },
      // 用户相关
      leadTypeList: [],
      leadStatusList: [],
      leadTimeframeList: [],
      leadUrgencyList: [],
      leadHomeList: [],
      minimumPriceList: ['$50,000','$100,000','$150,000','$200,000','$250,000','$300,000','$350,000','$400,000','$450,000','$500,000','$550,000','$600,000','$650,000','$700,000','$750,000','$800,000','$850,000','$900,000','$950,000','$1,000,000','$1,050,000','$1,100,000','$1,150,000','$1,200,000','$1,250,000','$1,300,000','$1,350,000','$1,400,000','$1,450,000','$1,500,000','$1,550,000','$1,600,000','$1,650,000','$1,700,000','$1,750,000','$1,800,000','$1,850,000','$1,900,000','$1,950,000','$2,000,000'],
      maximumPriceList: ['$100,000','$150,000','$200,000','$250,000','$300,000','$350,000','$400,000','$450,000','$500,000','$550,000','$600,000','$650,000','$700,000','$750,000','$800,000','$850,000','$900,000','$950,000','$1 Million','$2 Million','$3 Million','$4 Million','$5 Million','$6 Million','$7 Million','No Limit'],
      minimumBedroomsList: ['1+','2+','3+','4+','5+','6+','7+','8+','9+'],
      minimumBathroomsList: ['1+','2+','3+','4+','5+','6+','7+','8+','9+'],
      squareFootageList: ['500+','1000+','1500+','2000+','2500+','3000+','3500+','4000+','4500+','5000+','5500+','6000+','6500+','7000+','7500+','8000+','8500+','9000+','9500+','10000+'],
      tcBotNavList: [
        {'icon': '', 'title': 'Secondary Contact', 'active': 1},
        {'icon': '', 'title': 'Important Notes', 'active': 0},
        // {'icon': '', 'title': 'Source:Ret:(I.Instagram)', 'active': 0},
        {'icon': '', 'title': 'Tags', 'active': 0}
      ],
      rememinderList: [],
      showTcUserInfoNum: 1,
      emailTepList: [],
      emailTempvisible: false,
      sendEmailForm: {
        'to': '',
        'cc': '',
        'subject': '',
        'template': ''
      },
      // important date
      importantDateVisible: false,
      getImportantDateTypeList: ['Birthday'],
      importantDateForm: {
        'type': '',
        'time': '',
        'notes': '',
        'ischeck': 0,
      },

      // tags
      newTagName: '',
      userTagList: [],
      
      // 富文本
      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
      serverUrl: url,  // 这里写你要上传的图片服务器地址
      // header: {token: this.$cookie.get('token')},  // 有的图片服务器要求请求头需要有token之类的参数，写在这里
      detailContent: '', // 富文本内容
      editorOption: {  // 富文本编辑器配置
        placeholder: '',
        theme: 'snow',  // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions,  // 工具栏
            handlers: {
              'image': function (value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        },
        handlers: {
          'image': function (value) {
            if (value) {
              // document.querySelector('#quill-upload input').click()
              console.log('执行了image')
            } else {
              // this.quill.format('image', false)
            }
          }
        }
      },

      // 弹窗: 电话
      CallPhonevisible: false,
      originUserInfo: ''

    }
  },
  mounted () {
  
  },
  activated () {
    this.selectActType = ''
    this.newTagName = ''
    this.getAgentList()
    this.initList()
  },
  methods: {
    // 获取代理列表
    getAgentList () {
      this.$http({
        url: this.$http.adornUrl('/crm/broker/getAgents'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('-----  获取代理列表成功 -----', data)
          this.getFollowUserList = data.brokerAgents

        } else {
          console.log('-----  获取代理列表失败 -----', data)
          this.getFollowUserList = []
          this.$message.error(data.msg)
        }
      })
    },

    // 获取tag 
    getTagList (fl) {
      if(fl) {
        var params31 = {
          'leadId': this.userId,
          'toUpdate': 0
        }
      }

      var params31 = {
        'leadId': this.userId,
        'tagName': this.userTagList,
        'toUpdate': 1
      }
      console.log('----- 获取 tag列表 传参', params31)

      this.$http({
        url: this.$http.adornUrl('/crm/leads/updateLead4Tags'),
        method: 'post',
        data: this.$http.adornData(params31)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('-----  获取 tag列表 成功 -----', data)
          this.userTagList = data.tags

        } else {
          console.log('-----  获取 tag列表 失败 -----', data)
          this.userTagList = []
          var errorMsg = 'Interface: /crm/leads/updateLead4Tags '+data.msg
          this.$message.error(errorMsg)
        }
      })
    },

    initList () {
      var userId = sessionStorage.getItem('userId')
      this.userId = userId
      console.log('----- userId: -----', userId)

      // 1 获取用户信息
      this.$http({
        url: this.$http.adornUrl(`/crm/leads/getLeadInfo/${userId}`),
        method: 'post',
        data: this.$http.adornData({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 获取用户信息成功 -----', data)
          var activityList = this.activityList
          var ycdays = 0
          this.userObj = data.leadinfo
          this.originUserInfo = data.leadinfo ? JSON.stringify(data.leadinfo) : ''

          if(data.leadinfo) {
            var leadinfo = data.leadinfo
            activityList[0].num = leadinfo.useSearches ? leadinfo.useSearches : 0
            activityList[1].num = leadinfo.useVisits ? leadinfo.useVisits : 0
            activityList[2].num = leadinfo.useProps ? leadinfo.useProps : 0
            // activityList[3].num = leadinfo.useSaves ? leadinfo.useSaves : 0 // 待取值
            activityList[3].num = leadinfo.useFavs ? leadinfo.useFavs : 0
            activityList[4].num = leadinfo.useMailNewlist ? leadinfo.useMailNewlist : 0
            activityList[5].num = leadinfo.useAvgPrice ? '$'+this.formatNum(leadinfo.useAvgPrice) : '$'+0
            if(leadinfo.useActiveDate) {
              ycdays = this.getRemainderTime(leadinfo.useActiveDate)
            }
            activityList[6].num = ycdays // 待取值
           
            this.activityList = activityList
            this.sendEmailForm.to = leadinfo.email
   
          }

        } else {
          console.log('----- 获取用户信息失败 -----', data.msg)
        }
      })

      // 2 获取各种type
      this.$http({
        url: this.$http.adornUrl('/crm/getOptions'),
        method: 'post',
        data: this.$http.adornData({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('-----  获取各种type成功 -----', data)
          this.totalTypeObj = data.options
          this.getActTypeList = data.options.activity_type
          this.getFollowPurposeList = data.options.followup_purpose
          this.leadTypeList = data.options.lead_type
          this.leadStatusList = data.options.lead_status
          this.leadTimeframeList = data.options.lead_timeframe
          this.leadUrgencyList = data.options.lead_urgency
          this.leadHomeList = data.options.lead_home

        } else {
          console.log('-----  获取各种type失败 -----', data)
        }
      })

      // 3 获取type
      var params = {
        'userId': this.userId,
        'onlyType': 1  // 返回筛选项
      }
      console.log('----- 获取活动轨迹列表中的type传参 -----', params)

      this.$http({
        url: this.$http.adornUrl('/crm/activity/getActivities'),
        method: 'post',
        data: this.$http.adornData(params)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 获取活动轨迹列表中的type成功 -----', data)
          var actTypeList = data.activities

          var allType = []
          if(actTypeList && actTypeList.length) {
            actTypeList.map((item, index, arr) => {
              allType.push(item.value)
            })
          }

          // 处理
          var navList = [{'label': 'All Activities', 'active': 1}]
          if(actTypeList && actTypeList.length) {
            actTypeList.map((item, index, arr) => {
              item.active = 0
              navList.push(item)
            })
          }
          this.navList = navList
        } else {
          console.log('----- 获取活动轨迹列表中的type失败 -----', data)
        }
      })
      
      
      this.getFollowUpList() // 4 获取Follow-up列表
      this.getDataList()  // 5 获取轨迹列表
      this.getEmailTemplate() // 6 获取email模板
      this.getTagList(1) // 7 获取tag列表

    },

    getRemainderTime (startTime) {
      var s1 = new Date(startTime.replace(/-/g, "/"))
      var s2 = new Date()
      var runTime = parseInt((s2.getTime() - s1.getTime()) / 1000)
      var year = Math.floor(runTime / 86400 / 365)
      runTime = runTime % (86400 * 365)
      var month = Math.floor(runTime / 86400 / 30)
      runTime = runTime % (86400 * 30)
      var day = Math.floor(runTime / 86400)
      runTime = runTime % 86400
      var hour = Math.floor(runTime / 3600)
      runTime = runTime % 3600
      var minute = Math.floor(runTime / 60)
      runTime = runTime % 60
      var second = runTime
      return day
    },
    // 获取email模板
    getEmailTemplate () {

      this.$http({
        url: this.$http.adornUrl('/crm/activity/getEmailTemplate'),
        method: 'post',
        data: this.$http.adornData({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 获取 email模板 成功 -----', data)
          this.emailTepList = data.emailTpls

        } else {
          console.log('----- 获取 email模板 失败 -----', data)
          this.emailTepList = []
          this.$message.error(data.msg)
        }

      })

    },
    // 点击 + New Blank Email
    showEmailTempModal() {
      // 清空
      this.sendEmailForm.cc = ''
      this.sendEmailForm.subject = ''
      this.sendEmailForm.template = ''
      this.detailContent = ''
      this.emailTempvisible = true
    },
    // 点击已有的模板
    editOddEmailTemp (item) {
      this.emailTempvisible = true
      this.sendEmailForm.subject = item.etitle
      this.sendEmailForm.template = item.etitle
      this.detailContent = item.econtent
    },

    // 选择模板时
    showSelectTemplate (m) {
      var sm = this.sendEmailForm.template
      var emailTepList = this.emailTepList
      if(emailTepList && emailTepList.length) {
        emailTepList.map((item, index, arr) => {
          if(item.etitle == sm) {
            this.sendEmailForm.subject = item.etitle
            this.detailContent = item.econtent
          }
        })
      }
    },
    // 点击--send
    handleEmailTempOk(e) {

      // 请求
      var params13 = {
        'leadId': this.userId,
        'mcontent': this.detailContent,
        'mcc': this.sendEmailForm.cc,
        'msubject': this.sendEmailForm.subject,
        'mto': this.sendEmailForm.to
      }
      console.log('----- 发送 email 传参 -----', params13)
      this.$http({
        url: this.$http.adornUrl('/crm/activity/sendCRMEmail'),
        method: 'post',
        data: this.$http.adornData(params13)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 发送 email 成功 -----', data)
          this.$message.success('Send successfully.', 2, function () {})
          // this.getEmailTemplate()

        } else {
          console.log('----- 发送 email 失败 -----', data)
          this.$message.error(data.msg)
        }

      })

      this.emailTempvisible = false
    },
    // 获取Follow-up列表
    getFollowUpList () {
      var params5 = {
        'leadId': this.userId
      }
      console.log('----- 获取 有关该用户的Follow-up 传参 -----', params5)
      this.$http({
        url: this.$http.adornUrl('/crm/activity/getNextFollowups'),
        method: 'post',
        data: this.$http.adornData(params5)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 获取 有关该用户的Follow-up列表 成功 -----', data)
          var list = data.page.list
          this.userFollowList = data.page.list
        } else {
          console.log('----- 获取 有关该用户的Follow-up列表 失败 -----', data)
          this.$message.error(data.msg)
        }

      })

    },
    // 获取用户轨迹列表
    getDataList () {
      this.dataListLoading = true
      var params2 = {
        'page': this.pageIndex,
        'limit': this.pageSize,
        'key': this.dataForm.key,
        'userId': this.userId,
        'actType': this.selectActType,
        'onlyType': 0
      }
      console.log('----- 获取用户轨迹列表传参 -----', params2)

      this.$http({
        url: this.$http.adornUrl('/crm/activity/getActivities'),
        method: 'post',
        data: this.$http.adornData(params2)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 获取用户轨迹列表成功 -----', data)
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          console.log('----- 获取用户轨迹列表失败 -----', data)
          this.dataList = []
          this.totalPage = 0
          this.$message.error(data.msg)
        }
        this.dataListLoading = false
      })

    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    toSearchHandle () {
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle (id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
          return item.bhId
        })
      var _this = this
       _this.$confirm({//这个confirm是antUI的
          title:  `Are you sure [id=${ids.join(',')}] will be [${id ? 'deleted' : 'deleted batch'}] ?`,
          content: '',
          onOk() {
            console.log('----- 删除 -----')
            _this.$http({
              url: _this.$http.adornUrl('/crm/browsehistory/delete'),
              method: 'post',
              data: _this.$http.adornData(ids, false)
            }).then(({ data }) => {
              if (data && data.code === 0) {
                _this.$message.success('success', 1, function () {
                  _this.getDataList()
                })
              } else {
                _this.$message.error(data.msg, 1)
              }
            })
          },
          onCancel() {
            console.log('----- 取消删除 -----');
          }
        })
    },
    // 点击
    tabsHandleClick (tab, event) {
        // console.log(JSON.stringify(tab));
        // console.log(JSON.stringify(event));
      console.log(tab.name + '--' + tab.label)
      sessionStorage.setItem('actType', tab.name)
      this.getDataList()

        // console.log(event);
      //     <el-tab-pane label="Visit" name="1"></el-tab-pane>
      // <el-tab-pane label="Search" name="2"></el-tab-pane>
      // <el-tab-pane label="Property" name="3"></el-tab-pane>
      // <el-tab-pane label="Favorites" name="4"></el-tab-pane>
      // <el-tab-pane label="Consult" name="5"></el-tab-pane>
    },
    changeNav (e) {
      var ind = +e.target.dataset.i
      var navList = this.navList
      for (var i = 0; i < navList.length; i++) {
        navList[i].active = 0
        if (i === ind) {
          navList[i].active = 1
          this.selectActType = navList[i].value
        }
      }
      this.navList = navList
      this.getDataList()
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    onChange(e) {
      this.placement = e.target.value;
    },
    handleMenuClick(e) {
      console.log('click', e)
    },
    // activity
    selectAcTime (date, dateString) {
      this.activityForm.time = dateString
    },
    // follow-up
    selectFollowTime (date, dateString) {
      this.followUpForm.time = dateString
    },
    selectEndRepeatTime (date, dateString) {
      this.followUpForm.repeatEndTime = dateString
    },
    onRedioChange(e) {
      console.log('radio checked', e.target.value)
      this.followUpForm.radio = e.target.value
      if(this.followUpForm.radio == 1) {
        this.followUpForm.repeatEndTime = ''
        this.followUpForm.repeatEvery = ''
        this.followUpForm.repeatDateUnit = ''
      }
    },
    onCheckboxChange(e) {
      this.followUpForm.ischeckbox = e.target.checked ? 1 : 0
      console.log('checked', this.followUpForm.ischeckbox)
    },
    changeTypes (i) {
      var ind = +i
      var typeList = this.typeList
      for (var i = 0; i < typeList.length; i++) {
        typeList[i].active = 0
        if (i === ind) {
          typeList[i].active = 1
        }
      }
      this.typeList = typeList
      this.showType = ind
    },
    tableRowStyle ({row,rowIndex}){
      if(rowIndex %2 === 1) {
        return 'background: #F5F8FF;'
      } else {
        return 'background: #EFFAFF;'
      }
    },
    cellStyle: function (row, column, rowIndex, columnIndex) {
      // return 'border: 0; border: 1px solid #fff;'
      if(row.column.label === 'Name'){
        return 'padding-left: 10px; font-size: 14px; font-weight: 700; color: #384157; border: 0; border: 1px solid #fff;'
      } else if(row.column.label === 'Notes'){
        return 'padding-left: 10px; font-size: 16px; color: #384157; border: 0; border: 1px solid #fff;'
      } else if(row.column.label === 'Activity'){
        return 'padding-left: 10px; font-size: 16px; font-weight: 700; color: #1890FF; border: 0; border: 1px solid #fff;'
      } else {
        return 'padding-left: 10px; font-size: 16px; color: #384157; border: 0; border: 1px solid #fff;'
      }
    },

    SubmitHandle (e) {
      e.preventDefault()
      // this.form.validateFieldsAndScroll((err, values) => {
      //   if (!err) {
      //     console.log('----- form值 -----', values);
      //     // 请求
      //   }
      // })
      
      // 1 修改其它用户信息
      this.reviseUserOtherInfo()

      // 2 修改上面第3列
      // this.reviseDtlContent()

      // 3 修改 Important Notes
      // this.importantNotesHandle()

    },
    
    // 1 修改其它用户信息
    reviseUserOtherInfo() {
      var params9 = {
        'leadId': this.userId,
        'email': this.userObj.email,
        'phone': this.userObj.phone,
        'leadAdtnAddress': this.userObj.leadAdtnAddress,
        'leadAdtnAltPhn': this.userObj.leadAdtnAltPhn,
        'leadAdtnCity': this.userObj.leadAdtnCity,
        'leadAdtnFax': this.userObj.leadAdtnFax,
        'leadAdtnNotes': this.userObj.leadAdtnNotes,
        'leadAdtnOffice': this.userObj.leadAdtnOffice,
        'leadAdtnState': this.userObj.leadAdtnState,
        'leadAdtnZip': this.userObj.leadAdtnZip,
        'leadCttEmailOk': 0,
        'leadCttFirstname': this.userObj.leadCttFirstname,
        'leadCttLastname': this.userObj.leadCttLastname,
        'leadCttPhoneOk': 0,
        'leadScAddress': this.userObj.leadScAddress,
        'leadScCell': this.userObj.leadScCell,
        'leadScCity': this.userObj.leadScCity,
        'leadScEmail': this.userObj.leadScEmail,
        'leadScFax': this.userObj.leadScFax,
        'leadScName': this.userObj.leadScName,
        'leadScOffice': this.userObj.leadScOffice,
        'leadScPhone': this.userObj.leadScPhone,
        'leadScState': this.userObj.leadScState,
        'leadScZip': this.userObj.leadScZip
      }
      console.log('----- 修改 用户联系信息 传参 -----', params9)
      this.$http({
        url: this.$http.adornUrl('/crm/leads/updateLead4contact'),
        method: 'post',
        data: this.$http.adornData(params9)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 修改 用户联系信息 成功 -----', data)
          this.$message.success('Modified success.', 2, function () {})
          this.initList()

        } else {
          console.log('----- 修改 用户联系信息 失败 -----', data)
          var errorMsg = 'Interface: /crm/leads/updateLead4contact '+data.msg
          this.$message.error(errorMsg)
        }

      })

    },
    
    // 2 修改上面第3列
    reviseDtlContent() {
      var params8 = {
        'leadId': this.userId,
        'leadDtlAgent': this.userObj.leadDtlAgent, // userObj.leadDtlAgent 暂时没有
        'leadDtlArea': this.userObj.leadDtlArea,
        'leadDtlLender': '',
        'leadDtlSource': '',
        'leadDtlStatus': this.userObj.leadDtlStatus,
        'leadDtlTimeframe': this.userObj.leadDtlTimeframe,
        'leadDtlType': this.userObj.leadDtlType,
        'leadDtlUrgency': this.userObj.leadDtlUrgency
      }
      console.log('----- 修改 画像信息 传参 -----', params8)
      this.$http({
        url: this.$http.adornUrl('/crm/leads/updateLead4Portrait'),
        method: 'post',
        data: this.$http.adornData(params8)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 修改 画像信息 成功 -----', data)
          this.$message.success('Modified success.', 2, function () {})
          this.initList()

        } else {
          console.log('----- 修改 画像信息 失败 -----', data)
          var errorMsg = 'Interface: /crm/leads/updateLead4Portrait '+data.msg
          this.$message.error(errorMsg)
        }

      })
      
    },
    
    // 3 修改 Important Notes
    importantNotesHandle() {
      var params6 = {
        "leadId": this.userId,
        "homeType": this.userObj.leadIpttHome,
        "maxPrice": this.userObj.leadIpttMaxPrice,
        "minBathrooms": this.userObj.leadIpttMinBathrooms,
        "minBedrooms": this.userObj.leadIpttMinBedrooms,
        "minPrice": this.userObj.leadIpttMinPrice,
        "squFootage": this.userObj.leadIpttSquFootage
      }
      console.log('----- 修改 Important Notes 传参 -----', params6)
      this.$http({
        url: this.$http.adornUrl('/crm/leads/updateLead4ImportantNotes'),
        method: 'post',
        data: this.$http.adornData(params6)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 修改 Important Notes 成功 -----', data)
          this.$message.success('Modified success.', 2, function () {})
          this.initList()

        } else {
          console.log('----- 修改 Important Notes 失败 -----', data)
          var errorMsg = 'Interface: /crm/leads/updateLead4ImportantNotes '+data.msg
          this.$message.error(errorMsg)
        }

      })


    },

    // 使用
    // changeUbaseInfo (e) {
    //   this.reviseUserOtherInfo()
    // },

    // 第3列
    // changeUrOtherInfo (e) {
    //   this.reviseDtlContent()
    // },

    // 下面次级
    // changeImportNotes (e) {
    //   this.importantNotesHandle()
    // },

    // 修改用户信息
    // 上面
    // 第1列
    changeUTfirstname (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadCttFirstname ? originUserInfo.leadCttFirstname : ''
      var bvalue = e.target._value

      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeUTlastname (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadCttLastname ? originUserInfo.leadCttLastname : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeUTphoneNumber (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.phone ? originUserInfo.phone : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeUTEmail (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.email ? originUserInfo.email : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },

    // 第2列
    changeUTAltPhn (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadAdtnAltPhn ? originUserInfo.leadAdtnAltPhn : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeUTOffice (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadAdtnOffice ? originUserInfo.leadAdtnOffice : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeUTFax (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadAdtnFax ? originUserInfo.leadAdtnFax : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeUTAddress (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadAdtnAddress ? originUserInfo.leadAdtnAddress : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeUTCity (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadAdtnCity ? originUserInfo.leadAdtnCity : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeUTStatus (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadAdtnState ? originUserInfo.leadAdtnState : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeUTZip (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadAdtnZip ? originUserInfo.leadAdtnZip : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },

    // 第3列
    changeUBType (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadDtlType ? originUserInfo.leadDtlType : ''
      var bvalue = e
      
      if(avalue != bvalue) {
        this.reviseDtlContent()
      }

    },
    changeUBStatus (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadDtlStatus ? originUserInfo.leadDtlStatus : ''
      var bvalue = e
      
      if(avalue != bvalue) {
        this.reviseDtlContent()
      }

    },
    changeUBArea (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadDtlArea ? originUserInfo.leadDtlArea : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseDtlContent()
      }

    },
    changeUBTimeframe (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadDtlTimeframe ? originUserInfo.leadDtlTimeframe : ''
      var bvalue = e
      
      if(avalue != bvalue) {
        this.reviseDtlContent()
      }

    },
    changeUBUrgency (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadDtlUrgency ? originUserInfo.leadDtlUrgency : ''
      var bvalue = e
      
      if(avalue != bvalue) {
        this.reviseDtlContent()
      }

    },
    changeUBAgent (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadDtlAgent ? originUserInfo.leadDtlAgent : ''
      var bvalue = e
      
      if(avalue != bvalue) {
        this.reviseDtlContent()
      }

    },

    // 下 次级联系人
    changeBSCName (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadScName ? originUserInfo.leadScName : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeBSCCell (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadScCell ? originUserInfo.leadScCell : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeBSCAddress (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadScAddress ? originUserInfo.leadScAddress : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeBSCPhone (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadScPhone ? originUserInfo.leadScPhone : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeBSCOffice (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadScOffice ? originUserInfo.leadScOffice : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeBSCCity (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadScCity ? originUserInfo.leadScCity : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeBSCStatus (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadScState ? originUserInfo.leadScState : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeBSCZip (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadScZip ? originUserInfo.leadScZip : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeBSCEmail (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadScEmail ? originUserInfo.leadScEmail : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },
    changeBSCFax (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadScFax ? originUserInfo.leadScFax : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },

    // Important Notes
    changeUBINHometype (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadIpttHome ? originUserInfo.leadIpttHome : ''
      var bvalue = e
      
      if(avalue != bvalue) {
        this.importantNotesHandle()
      }

    },
    changeUBINMinimumprice (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadIpttMinPrice ? originUserInfo.leadIpttMinPrice : ''
      var bvalue = e
      
      if(avalue != bvalue) {
        this.importantNotesHandle()
      }

    },
    changeUBINMinimumbedrooms (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadIpttMinBedrooms ? originUserInfo.leadIpttMinBedrooms : ''
      var bvalue = e
      
      if(avalue != bvalue) {
        this.importantNotesHandle()
      }

    },
    changeUBINMaximumprice (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadIpttMaxPrice ? originUserInfo.leadIpttMaxPrice : ''
      var bvalue = e
      
      if(avalue != bvalue) {
        this.importantNotesHandle()
      }

    },
    changeUBINMinimumbathrooms (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadIpttMinBathrooms ? originUserInfo.leadIpttMinBathrooms : ''
      var bvalue = e
      
      if(avalue != bvalue) {
        this.importantNotesHandle()
      }

    },
    changeUBINSquarefootage (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadIpttSquFootage ? originUserInfo.leadIpttSquFootage : ''
      var bvalue = e
      
      if(avalue != bvalue) {
        this.importantNotesHandle()
      }

    },
    changeUBINNotes (e) {
      var originUserInfo = JSON.parse(this.originUserInfo)
      var avalue = originUserInfo.leadAdtnNotes ? originUserInfo.leadAdtnNotes : ''
      var bvalue = e.target._value
      
      if(avalue != bvalue) {
        this.reviseUserOtherInfo()
      }

    },

    cancelHandle (e) {
      e.preventDefault()
      // this.form.resetFields()
      this.visible = false
      this.initList()
    },
    formatNum (str) {
      var str = typeof str == 'string' ? str : str + ''
      var newStr = ""
      var count = 0
      // 当数字是整数
      if (str.indexOf(".") == -1) {
        for (var i = str.length - 1; i >= 0; i--) {
          if (count % 3 == 0 && count != 0) {
            newStr = str.charAt(i) + "," + newStr
          } else {
            newStr = str.charAt(i) + newStr
          }
          count++
        }
        str = newStr; //自动补小数点后两位  + ".00"
        return str
      }
      // 当数字带有小数
      else {
        for (var i = str.indexOf(".") - 1; i >= 0; i--) {
          if (count % 3 == 0 && count != 0) {
            newStr = str.charAt(i) + "," + newStr
          } else {
            newStr = str.charAt(i) + newStr //逐个字符相接起来
          }
          count++
        }
        str = newStr + (str + "00").substr((str + "00").indexOf("."), 3)
        return str
      }
    },
    // 添加 activity
    addActivityHandle () {
      // 校验
      var activityForm = this.activityForm
      if(!activityForm.type) {
        this.$message.error('Please select Type')
        return
      }

      if(!activityForm.time) {
        this.$message.error('Please select Time')
        return
      }

      if(!activityForm.notes) {
        this.$message.error('Please enter Notes')
        return
      }

      var params3 = {
        "leadId": this.userObj.leadId,
        "actType": this.activityForm.type,
        "actTime": this.activityForm.time,
        "actNotes": this.activityForm.notes
      }
      console.log('----- 添加活动备注传参 -----', params3)

      this.$http({
        url: this.$http.adornUrl('/crm/activity/saveActivity'),
        method: 'post',
        data: this.$http.adornData(params3)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 添加活动备注成功 -----', data)
          // 提示
          this.$message.success('Save successfully.', 3, function () {})
          this.getDataList()

          // 刷新
        } else {
          console.log('----- 添加活动备注失败 -----', data)
          this.$message.error(data.msg)
        }
      })
    },
    // 点击--Add Reminder
    addReminderHandle () {
      //  1.添加一个数组元素
      var rememinderList = this.rememinderList
      if(rememinderList.length < 4) {
        var newObj = {'val': '', 'timeunit': ''}
        rememinderList.push(newObj)
        this.rememinderList = rememinderList
      } else {
        this.$message.warning('Up to four can be added.')
      }
     
    },
    // 删除
    deleteReminderHandle(i) {
      var i = i
      var rememinderList = this.rememinderList
      var newArr = []
      if(rememinderList && rememinderList.length) {
        rememinderList.map((item, index, arr) => {
          if(index != i) {
            newArr.push(item)
          }
        })
      }
      this.rememinderList = newArr

    },
    // 添加 follow-up
    addFollowUp () {
      // 校验
      var followUpForm = this.followUpForm

      if(!followUpForm.user) {
        this.$message.error('Please select User')
        return
      }

      if(!followUpForm.purpose) {
        this.$message.error('Please select Purpose')
        return
      }

      if(!followUpForm.title) {
        this.$message.error('Please enter Title')
        return
      }
       
      // 期间重复
      if(followUpForm.radio == 2) {
        if(!followUpForm.repeatEvery) {
          this.$message.error('Please enter Repeat Every')
          return
        }

        if(!followUpForm.repeatDateUnit) {
          this.$message.error('Please select repeatDateUnit')
          return
        }

        if(!followUpForm.repeatEndTime) {
          this.$message.error('Please select Ending')
          return
        }
      }

      if(!followUpForm.time) {
        this.$message.error('Please select Time')
        return
      }

      if(!followUpForm.notes) {
        this.$message.error('Please enter notes')
        return
      }

      // 处理
      var afterRememinderList = this.rememinderList
      var timeBeforeList = []
      if(afterRememinderList && afterRememinderList.length) {
        afterRememinderList.map((item, index, arr) => {
          var timeunit = (item.timeunit == 'minutes' ? 1 : (item.timeunit == 'hours' ? 2 : (item.timeunit == 'days' ? 3 : (item.timeunit == 'weeks' ? 4 : (item.timeunit == 'months' ? 5 : 6 )))))
          var str = item.val + '-' + timeunit
          timeBeforeList.push(str)
        })
      }
      
      var selectedUser = this.followUpForm.user
      var theAgentId = ''
      var getFollowUserList = this.getFollowUserList
      if(getFollowUserList && getFollowUserList.length) {
        getFollowUserList.map((item1, index1, arr1) => {
          if(item1.username == selectedUser) {
            theAgentId = item1.user_id
          }
        })
      }

      var params4 = {
        "actNotes": this.followUpForm.notes, // 备注说明
        "actTime": this.followUpForm.time, // 行动时间
        "agentId": theAgentId, // 多代理时选择 this.followUpForm.user
        "happenType": +this.followUpForm.radio, // 发生类型，1-指定时间；2-期间重复
        "allDayEvent": +this.followUpForm.ischeckbox, // 全天事件，1-是 0-默认，不是
        "leadId": this.userObj.leadId,
        "purpose": this.followUpForm.purpose, // 意图目的
        "reminders": this.rememinderList.length, // 是否提醒，0-默认，无邮件提醒；1-4 最多4个邮件提醒
        "timeBefores": timeBeforeList,
        "repeatEvery": this.followUpForm.repeatEvery, // 重复间隔
        "repeatDateUnit": this.followUpForm.repeatDateUnit ?  (this.followUpForm.repeatDateUnit == 'Days' ? 3 : (this.followUpForm.repeatDateUnit == 'Weeks' ? 4 : (this.followUpForm.repeatDateUnit == 'Months' ? 5 : 6 ))) : '', // 时间单位，1-minutes,2-hours,3-days,4-weeks,5-months,6-years
        "repeatEndTime": this.followUpForm.repeatEndTime,
        "title": this.followUpForm.title, // 标题

      }
      console.log('----- 添加follow-up传参 -----', params4)

      this.$http({
        url: this.$http.adornUrl('/crm/activity/saveFollowup'),
        method: 'post',
        data: this.$http.adornData(params4)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 添加follow-up成功 -----', data)
          // 提示
          this.$message.success('Save successfully.', 3, function () {})
          this.getFollowUpList()

          // 刷新
        } else {
          console.log('----- 添加follow-up失败 -----', data)
          this.$message.error(data.msg)
        }
      })
    },
    // tab
    changeBottomTab (i) {
      var i = i
      var tcBotNavList = this.tcBotNavList
      if(tcBotNavList && tcBotNavList.length) {
        tcBotNavList.map((item, index, arr) => {
          item.active = 0
          if(index == i) {
            this.showTcUserInfoNum = i+1
            item.active = 1
          }
        })
      }
      this.tcBotNavList = tcBotNavList
    },

    // 富文本
    getContent () {
      // this.dialogVisible = true
      // var quill = new Quill('#editor', {
      //   theme: 'snow'
      // })
      // var delta = Quill.getContents()
      // console.log(delta)
    },
    // 上传图片前
    beforeUpload (res, file) {
      // 显示loading动画
      this.quillUpdateImg = true
    },
    // 上传图片成功
    uploadSuccess (res, file) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill
      // console.log(res)
      // 如果上传成功
      if (res.code === 200) {
        console.log('执行')
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(length, 'image', res.url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        this.$message.error('图片插入失败')
      }
      // loading动画消失
      this.quillUpdateImg = false
    },
    // 上传图片失败
    uploadError (res, file) {
      // loading动画消失
      this.quillUpdateImg = false
      this.$message.error('图片插入失败')
    },
    onEditorBlur () { // 失去焦点事件
    },
    onEditorFocus () { // 获得焦点事件
    },
    onEditorChange () { // 内容改变事件
      // console.log(111111111, this.detailContent)
    },
    onEditorReady () {
    },
    // 添加 Important Date
    showImportDateModal() {
      this.importantDateVisible = true
    },
    closeIptDateHandle () {
      this.importantDateVisible = false
    },
    // 添加重要日期
    addNewImportantDate () {
      // 校验
      var importantDateForm = this.importantDateForm
      if(!importantDateForm.type) {
        this.$message.error('Please select Type')
        return
      }

      if(!importantDateForm.time) {
        this.$message.error('Please select Time')
        return
      }

      if(!importantDateForm.notes) {
        this.$message.error('Please enter Notes')
        return
      }

      // 请求
      var params7 = {
        'leadId': this.userId,
        'hasCalendar': this.importantDateForm.ischeck,
        'ipttDate': this.importantDateForm.time,
        'ipttNotes': this.importantDateForm.notes,
        'ipttType': this.importantDateForm.type
      }
      console.log('----- 添加 重要日期 传参 -----', params7)

      this.$http({
        url: this.$http.adornUrl('/crm/leads/updateLead4ImportantDate'),
        method: 'post',
        data: this.$http.adornData(params7)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 添加 重要日期 成功 -----', data)
          this.$message.success('Add Important Date success', 3, function () {})

        } else {
          console.log('----- 添加 重要日期 失败 -----', data)
          var errorMsg = 'Interface: /crm/leads/updateLead4ImportantDate '+data.msg
          this.$message.error(errorMsg)
        }
        
        this.importantDateVisible = false

      })

    },
    selectImportDateTime (date, dateString) {
      this.importantDateForm.time = dateString
    },
    // 改变多选框--Add to calendar as follow-up
    onChangeAddtocalendar(e) {
      console.log(e.target.checked)
      this.importantDateForm.ischeck = e.target.checked ? 1 : 0
    },
    // 添加tags
    addUserTagHandle () {
      var newTagName = this.newTagName

      if(newTagName) {
        var userTagList = this.userTagList
        userTagList.push(newTagName)
        this.userTagList = userTagList

        this.getTagList()
        this.importantDateVisible = false
      }
    },

    // 删除tags
    deleteTheTag(i) {
      var userTagList = this.userTagList
      var newArrs = []
      if(userTagList && userTagList.length) {
        userTagList.map((item, index, arr) => {
          if(index != i) {
            newArrs.push(item)
          }
        })
      }
      this.userTagList = newArrs
      if(!newArrs.length) {
        this.getTagList(1)
      } else {
        this.getTagList()
      }
     

    },

    // 清除new flag
    clearNewFlagHandle () {
      var params32 = {
        'leadId': this.userId
      }
      console.log('----- 清除new flag 传参', params32)

      this.$http({
        url: this.$http.adornUrl('/crm/leads/updateLead4ClrNewFlag'),
        method: 'post',
        data: this.$http.adornData(params32)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('-----  清除new flag 成功 -----', data)
          // 刷新
          this.initList()

        } else {
          console.log('-----  清除new flag 失败 -----', data)
          var errorMsg = 'Interface: /crm/leads/updateLead4ClrNewFlag '+data.msg
          this.$message.error(errorMsg)

        }
      })
    },

    // 电话: 弹窗
    showPhoneModal() {
      this.CallPhonevisible = true
    },

  }
}
</script>

<style lang="less" scoped>
.a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: hidden;
}
// 用户信息
.headBox {
  padding: 20px;
  background:rgba(243,246,253,1);
  border-radius:2px;
  margin-top: 13px;
  position: relative;
  margin-bottom: 20px;

  .pic {
    width:60px;
    height:60px;
    background:rgba(255,255,255,1);
    border-radius:2px;
    margin-right: 15px;
  }

  .user {
    width: 570px;
    padding-top: 3px;

    .nm {
      font-size:16px;
      color:rgba(123,133,157,1);
      margin-bottom: 5px;
      .name {
        font-size:18px;
        color:rgba(56,65,87,1);
        margin-right: 16px;
      }
      .flags {
        display: inline-block;
        margin-left: 15px;
        padding: 4px 10px;
        background: #1890FF;
        font-size:14px;
        color:rgba(255,255,255,1);
        .new {
          display: inline-block;
          width: 120px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background:#fff;
          color: #000;
          cursor: pointer;
        }
      }
    }

    .infos {
      .start,
      .active {
        width: 250px;
        font-size:14px;
        font-weight:400;
        color:#384157;
        .txt {
          font-size:14px;
          font-weight:400;
          color: #0050B3;
          margin-right: 10px;
        }
      }
    }

  }

  .datas {
    // width: 500px;
    .status,
    .visits,
    .searches,
    .props {
      height: 60px;
      padding-top: 2px;
      float: left;
      text-align: center;
      background: rgba(255,255,255,1);
      border: 1px solid rgba(230,230,230,1);
      border-radius: 4px;
      margin-right: 15px;
      .num {
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        color: rgba(70,70,70,1);
      }
      .title {
        font-size: 14px;
        font-weight: 400;
        color: rgba(23,179,163,1);
      }
    }
    .status {
      .num {
        font-size: 20px;
      }
    }

    .el-col-4 {
      width: 18%;
    }
  }

  .rbox {
    width: 150px;
    height: 60px;
    float: right;
    .item {
      width:60px;
      height:60px;
      background:rgba(54,207,201,1);
      border-radius:2px;
      float: left;
      margin-right: 30px;
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
    }
  }

  @media screen and (max-width: 1492px) {
    .datas {
      margin-top: 10px;
    }
  }

  .box-card {
    width: 100%;
    .inbox {
      line-height: 10px;
      font-size: 14px;
      .icons {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }

      .txt {
        display: inline-block;
        width: 160px;
        &.txts {
          word-wrap: none;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &.txt2 {
          width: 235px;
        }
      }
    }
    .b-item {
      margin-bottom: 8px;
      .inspan {
        display: inline-block;
        width: 200px;
        font-weight: 600;
        color: #17B3A3;
      }
    }
  }

}

// 详细信息
.drawBox {
  width: 100%;
  margin: 0 auto;
  padding: 0px 0 0 30px;
  .topinfos {
    margin-bottom: 30px;
    // 左
    .lbaseInfo {
      width: 320px;
      margin-right: 60px;
      .formBox {
        width: 320px;
        .items {
          width: 320px;
          margin-bottom: 15px;
          .text {
            height: 32px;
            padding: 0 10px;
            font-size:12px;
            font-weight:bold;
            color:rgba(24,144,255,1);
          }
          .ipt {
            width: 320px;
          }
          &.tm {
            margin-bottom: 48px;
          }
        }

        /deep/ .ant-input {
          width: 320px;
          height: 40px;
          line-height: 40px;
          outline: 0!important;
          border: 0!important;
          background:rgba(243,246,253,1);
          border-radius:2px;
          font-size: 16px;
          font-weight: bold;
          color: rgba(56,65,87,1);
        }

        // logo
        .logos {
          width: 320px;
          .inx {
            float: right;
            .photo {
              width: 40px;
              height: 40px;
              margin-right: 20px;
              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
      }
    }

    // 中
    .middleInfo {
      width: 320px;
      margin-right: 60px;
      .formBox {
        .items {
          width: 320px;
          margin-bottom: 15px;
          .text {
            height: 32px;
            padding: 0 10px;
            font-size:12px;
            font-weight:bold;
            color:rgba(24,144,255,1);
          }
          .ipt {
            width: 320px;
          }
          &.citys {
            margin-bottom: 48px;
            .inrow {
              width: 320px;
              .theone {
                width: 100px;
                margin-right: 10px;
                &:last-child {
                  margin-right: 0;
                }
                .text {
                  height: 32px;
                  padding: 0 10px;
                  font-size:12px;
                  font-weight:bold;
                  color:rgba(24,144,255,1);
                }
                .ipt {
                  width: 100px;
                  .ant-input {
                    width: 100px!important;
                  } 
                }
              }
            }
          }
        }

        .importa {
          width: 320px;
          height: 40px;
          line-height: 40px;
          background:rgba(54,207,201,1);
          border-radius:2px;
          font-size: 16px;
          font-weight: bold;
          color: rgba(255,255,255,1);
          text-align: center;
          cursor: pointer;
          .pic {
            width: 17px;
            height: 17px;
            // border-radius: 50%;
            // background: #fff;
            margin-right: 15px;
          }
        }

        /deep/ .ant-input {
          width: 320px;
          height: 40px;
          line-height: 40px;
          outline: 0!important;
          border: 0!important;
          background:rgba(243,246,253,1);
          border-radius:2px;
          font-size: 16px;
          font-weight: bold;
          color: rgba(56,65,87,1);
        }
      }
    }

    // 右
    .rigInfo {
      width: 200px;
      margin-right: 60px;
      .formBox {
        .items {
          margin-bottom: 15px;
          .text {
            height: 32px;
            padding: 0 10px;
            font-size:12px;
            font-weight:bold;
            color:rgba(24,144,255,1);
          }
          .ipt {
            width: 200px;
          }

          .leadinfo-type {
            .el-select {
              width: 200px;
              .el-input__inner {
                height: 40px;
                line-height: 40px;
                width: 200px;
                background:rgba(243,246,253,1);
                border-radius:2px;
              }
            }
          }
   
        }


        /deep/ .ant-input {
          width: 200px;
          height: 40px;
          line-height: 40px;
          outline: 0!important;
          border: 0!important;
          background:rgba(243,246,253,1);
          border-radius:2px;
          font-size: 16px;
          font-weight: bold;
          color: rgba(56,65,87,1);
        }
      }
    }

  }

  .botInfos {
    margin-bottom: 20px;
    .tab {
      height: 40px;
      .item {
        width:200px;
        height:40px;
        line-height: 40px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(243,246,253,1);
        border-radius:2px 2px 0px 0px;
        padding-left: 14px;
        font-size:12px;
        font-weight:bold;
        color:rgba(123,133,157,1);
        position: relative;
        float: left;
        cursor: pointer;
        &.item2 {
          width: 180px;
        }
        &.item4 {
          width: 90px;
        }
        &.active {
          background:rgba(243,246,253,1);
          border-radius:2px 2px 0px 0px;
          border: 0;
          font-size: 12px;
          font-weight: bold;
          color: rgba(56,65,87,1);
        }
        .pic {
          width: 12px;
          height: 6px;
        }
        .rigpic {
          width: 8px;
          height: 12px;
        }
        .fdtxt {
          font-size: 16px;
          transform: scale(0.5);
          font-weight:bold;
          color:rgba(255,77,79,1);
          position: absolute;
          top: -2px;
          right: 5px;
          z-index: 999;
        }
      }
    }
    // 显示
    .showBoxes {
      // Secondary Contact
      .box1 {
        width: 960px;
        height: 281px;
        padding: 25px 20px;
        background:rgba(243,246,253,1);
        .item {
          width: 280px;
          margin-right: 20px;
          margin-bottom: 27px;
          float: left;
      
          &:nth-child(3n) {
            margin-right: 0;
          }
          .tit {
            padding-left: 10px;
            font-size:12px;
            font-weight:bold;
            color:rgba(24,144,255,1);
            margin-bottom: 3px;
          }
          .xl {
            .int {
            }
          }

          &.item3 {
            width: 320px;
            .xl {
              .int {
              }
            }
          }

          &.moreIt {
            width: 320px;
            .nbbox {
              width: 100px;
              margin-right: 10px;
              float: left;
              &:nth-child(3n) {
                margin-right: 0;
              }
              .tit {
                padding-left: 10px;
                font-size:12px;
                font-weight:bold;
                color:rgba(24,144,255,1);
                margin-bottom: 3px;
              }
              .xl {
                .int {
                }
              }
            }
          }
        }
      }
       
      // Important Notes
      .box2 {
        width: 960px;
        height: 281px;
        padding: 25px 20px;
        background:rgba(243,246,253,1);
        .lz {
          width: 600px;
          float: left;
          .item {
            width: 280px;
            margin-right: 20px;
            margin-bottom: 27px;
            float: left;
 
            .tit {
              padding-left: 10px;
              font-size:12px;
              font-weight:bold;
              color:rgba(24,144,255,1);
              margin-bottom: 3px;
            }
            .xl {
              .int {
                width: 280px;
                height: 40px;
                line-height: 40px;
                padding: 0 10px;
                background:rgba(255,255,255,1);
                border-radius:2px;
                outline: 0;
                border: 0;
                font-size:16px;
                font-weight:bold;
                color:rgba(56,65,87,1);
              }
            }
            

            &.moreIt {
              width: 320px;
              .nbbox {
                width: 100px;
                margin-right: 10px;
                float: left;
                &:nth-child(3n) {
                  margin-right: 0;
                }
                .tit {
                  padding-left: 10px;
                  font-size:12px;
                  font-weight:bold;
                  color:rgba(24,144,255,1);
                  margin-bottom: 3px;
                }
                .xl {
                  .int {
                    width: 100px;
                    height:40px;
                    line-height: 40px;
                    padding: 0 10px;
                    background:rgba(255,255,255,1);
                    border-radius:2px;
                    outline: 0;
                    border: 0;
                    font-size:16px;
                    font-weight:bold;
                    color:rgba(56,65,87,1);
                  }
                }
              }
            }
          }
        }
        .ry {
          width: 320px;
          float: left;
          .notes {
            .tit {
              padding-left: 10px;
              font-size:12px;
              font-weight:bold;
              color:rgba(24,144,255,1);
              margin-bottom: 3px;
            }

            .noteTextArea {
              width: 100%;
              height: 215px;
              padding: 4px 9px;
              background:rgba(255,255,255,1);
              border-radius: 2px;
              outline: 0;
              border: 0;
              font-size: 14px;
              font-weight: bold;
              color: rgba(56,65,87,1);
              resize: none;
              } 
            }
          }
      }

      // Source:Ret:(I.Instagram)
      .box3 {
        width: 960px;
        height: 281px;
        padding: 25px 20px;
        background:rgba(243,246,253,1);
      }

      // tags
      .box4 {
        width: 960px;
        max-height: 281px;
        padding: 25px 20px;
        background:rgba(243,246,253,1);
        .bxs {
          margin-bottom: 30px;
          .linput {
            float: left;
            .ant-input {
              width: 150px;
              height: 40px;
              line-height: 40px;
              border: 0;
              font-size:16px;
              font-weight:bold;
              color:rgba(56,65,87,1);
              border-radius: 2px 0 0 2px;
            }
          }
          .rbtn {
            float: left;
            width: 80px;
            height:40px;
            line-height: 40px;
            text-align: center;
            background:rgba(54,207,201,1);
            border-radius: 0 2px 2px 0;
            font-size:16px;
            font-weight:bold;
            color:rgba(255,255,255,1);
            cursor: pointer;
          }
        }

        .list {
          .titem {
            display: inline-block;
            padding: 5px 10px;
            background: rgba(34,172,56,1);
            border-radius: 2px;
            font-size: 12px;
            color: rgba(255,255,255,1);
            margin-right: 20px;
            position: relative;
            .pic {
              width: 15px;
              height: 15px;
              border-radius: 50%;
              position: absolute;
              top: -8px;
              right: -5px;
              z-index: 999;
              cursor: pointer;
              .img {
                width: 15px;
                height: 15px;
              }
            }
          }
        }

      }
    }
  }
 
  .caozuo {
    padding-right: 35px;
    .inb {
      float: right;
      .done,
      .cancel {
        width:150px;
        height:40px;
        line-height: 40px;
        text-align: center;
        background:rgba(24,144,255,1);
        border-radius:2px;
        font-size:16px;
        font-weight:bold;
        color:rgba(255,255,255,1);
        float: left;
        cursor: pointer;
        border: 0;
        &:hover {
          border: 0;
          background:rgba(24,144,255,1);
        }
        &:active {
          border: 0;
        }
      }
      .cancel {
        background:rgba(182,189,205,1);
        margin-left: 20px;
      }
    }
  }

  // 弹窗
  .importDateTc {
    width: 100%;
    height: 100%;
    padding-top: 150px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999999999999;
    background: rgba(0,0,0,.3);
    .content {
      width: 480px;
      height: 300px;
      background: #fff;
      margin: 0 auto;
      // 关闭
      .close {
        width: 100%;
        padding: 10px 24px;
        font-size: 16px;
        color: #2C344A;
        font-weight: 600;
        position: relative;
        .pic {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          position: absolute;
          top: 10px;
          right: 15px;
          z-index: 999;
          cursor: pointer;
        }
      }

      // Activity
      .dateinfomation {
        height: 530px;
        padding: 30px;
        background: #F3F6FD;
        .typeed {
          height: 32px;
          line-height: 32px;
          margin-bottom: 30px;
          .txt {
            width: 60px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          // 下拉
          .rbox {
            width: calc(100% - 60px);
            .dropbox {
              width: 100%;
              height: 30px;
              background: rgba(255,255,255,1);
              border-radius: 2px;
              outline: 0;
              border: 0;
              text-align: left;
            }
            .showTxt {
              font-size: 14px;
              font-weight: bold;
              color: rgba(56,65,87,1);
              padding: 0 7px;
              position: relative;
              .pic {
                width: 30px;
                height: 30px;
                background: rgba(233,236,243,1);
                border-radius: 0px 2px 2px 0px;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 999;
                .ico {
                  width: 12px;
                  height: 6px;
                  position: absolute;
                  top: 12px;
                  left: 9px;
                  z-index: 99;
                }
              }
            }
          }
        }
        .tmdate {
          margin-bottom: 30px;
          .txt {
            width: 60px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          // 时间
          .rbox {
            width: calc(100% - 60px);
            .tmpicker {
              width: 100%!important;
              height: 30px;
              background: rgba(255,255,255,1);
              border-radius: 2px;
              outline: 0;
              border: 0;
              text-align: left;
              /deep/ .ant-input {
                border: 0;
                font-size: 14px;
                font-weight: bold;
                color: rgba(56,65,87,1);
                padding: 4px 9px;
              }
            }
          }
        }
        .notes {
          margin-bottom: 30px;
          .txt {
            width: 60px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          .rbox {
            width: calc(100% - 60px);
            .noteTextArea {
              width: 100%;
              height: 240px;
              padding: 4px 9px;
              background:rgba(255,255,255,1);
              border-radius: 2px;
              outline: 0;
              border: 0;
              font-size: 14px;
              font-weight: bold;
              color: rgba(56,65,87,1);
              resize: none;
            }
          }
        }
        .addToFollow {
          font-size: 14px;
          color: rgba(56,65,87,1);
          margin-bottom: 30px;
          .ant-checkbox-wrapper {
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
        }
        .save {
          width: 120px;
          height: 30px;
          line-height: 30px;
          background:rgba(24,144,255,1);
          border-radius: 2px;
          text-align: center;
          cursor: pointer;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          float: right;
        }
      }

    }
  }
}

// 备注
.bezBox {
  // width: 1550px;
  margin-bottom: 40px;
  .remarks {
    // height: 570px;
    // box-sizing: border-box;
    background: #fff;
    margin-left: 0px !important;
    margin-right: 0px !important;
    .r-item {
      height: 570px;
      overflow-y: auto;
      .ite {
        height: 570px;
        background:rgba(243,246,253,1);
        border-radius: 2px;
      }

      &.laddInf {
        padding-left: 0!important;
        .ite {
          .m {
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-right: 1px solid #fff;
            background: #E9ECF3;
            cursor: pointer;
            z-index: 99;
            &:last-child {
              border: 0;
            }
            &:hover,
            &.active {
              background: rgba(24,144,255,1);
              border-radius: 2px 0px 0px 0px;
              font-size: 14px;
              color:rgba(255,255,255,1);
            }
            .pic {
              width: 18px;
              height: 18px;
              vertical-align: middle;
              margin-right: 3px;
            }
          }
          // Activity
          .activities {
            height: 530px;
            padding: 50px 30px;
            background: #F3F6FD;
            .typeed {
              height: 30px;
              line-height: 30px;
              margin-bottom: 30px;
              .txt {
                width: 60px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: rgba(56,65,87,1);
              }
              // 下拉
              .rbox {
                width: calc(100% - 60px);
                .dropbox {
                  width: 100%;
                  height: 30px;
                  background: rgba(255,255,255,1);
                  border-radius: 2px;
                  outline: 0;
                  border: 0;
                  text-align: left;
                }
                .showTxt {
                  font-size: 14px;
                  font-weight: bold;
                  color: rgba(56,65,87,1);
                  padding: 0 7px;
                  position: relative;
                  .pic {
                    width: 30px;
                    height: 30px;
                    background: rgba(233,236,243,1);
                    border-radius: 0px 2px 2px 0px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 999;
                    .ico {
                      width: 12px;
                      height: 6px;
                      position: absolute;
                      top: 12px;
                      left: 9px;
                      z-index: 99;
                    }
                  }
                }
              }
            }
            .tmdate {
              margin-bottom: 30px;
              .txt {
                width: 60px;
                height: 32px;
                line-height: 32px;
                font-size: 14px;
                color: rgba(56,65,87,1);
              }
              // 时间
              .rbox {
                width: calc(100% - 60px);
                .tmpicker {
                  width: 100%!important;
                  height: 30px;
                  background: rgba(255,255,255,1);
                  border-radius: 2px;
                  outline: 0;
                  border: 0;
                  text-align: left;
                  /deep/ .ant-input {
                    border: 0;
                    font-size: 14px;
                    font-weight: bold;
                    color: rgba(56,65,87,1);
                    padding: 4px 9px;
                  }
                }
              }
            }
            .notes {
              margin-bottom: 30px;
              .txt {
                width: 60px;
                height: 32px;
                line-height: 32px;
                font-size: 14px;
                color: rgba(56,65,87,1);
              }
              .rbox {
                width: calc(100% - 60px);
                .noteTextArea {
                  width: 100%;
                  height: 240px;
                  padding: 4px 9px;
                  background:rgba(255,255,255,1);
                  border-radius: 2px;
                  outline: 0;
                  border: 0;
                  font-size: 14px;
                  font-weight: bold;
                  color: rgba(56,65,87,1);
                  resize: none;
                }
              }
            }
            .save {
              width: 120px;
              height: 30px;
              line-height: 30px;
              background:rgba(24,144,255,1);
              border-radius: 2px;
              text-align: center;
              cursor: pointer;
              font-size: 14px;
              font-weight: 400;
              color: rgba(255,255,255,1);
              float: right;
            }
          }
          // Follow-up
          .follow {
            height: 530px;
            padding: 50px 30px;
            background: #F3F6FD;
            .user,
            .purpose {
              height: 30px;
              line-height: 30px;
              margin-bottom: 30px;
              .txt {
                width: 60px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: rgba(56,65,87,1);
              }
              // 下拉
              .rbox {
                width: calc(100% - 60px);
                .dropbox {
                  width: 100%;
                  height: 30px;
                  background: rgba(255,255,255,1);
                  border-radius: 2px;
                  outline: 0;
                  border: 0;
                  text-align: left;
                }
                .showTxt {
                  font-size: 14px;
                  font-weight: bold;
                  color: rgba(56,65,87,1);
                  padding: 0 7px;
                  position: relative;
                  .pic {
                    width: 30px;
                    height: 30px;
                    background: rgba(233,236,243,1);
                    border-radius: 0px 2px 2px 0px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 999;
                    .ico {
                      width: 12px;
                      height: 6px;
                      position: absolute;
                      top: 12px;
                      left: 9px;
                      z-index: 99;
                    }
                  }
                }
              }
            }

            .followtitle {
              height: 32px;
              line-height: 32px;
              margin-bottom: 30px;
              .txt {
                width: 60px;
                height: 32px;
                line-height: 32px;
                font-size: 14px;
                color: rgba(56,65,87,1);
              }
              // 输入框
              .rbox {
                width: calc(100% - 60px);
                font-size:14px;
                font-weight:bold;
                color:rgba(56,65,87,1);
              }
            }

            .interval {
              margin-bottom: 20px;
              .txt {
                width: 60px;
                height: 32px;
                line-height: 32px;
                font-size: 14px;
                color: rgba(56,65,87,1);
              }
              // 单选
              .rbox {
                width: calc(100% - 60px);
                font-size:14px;
                font-weight:bold;
                color:rgba(56,65,87,1);
                .ant-radio-wrapper {
                  font-size:14px;
                  font-weight:bold;
                  color:rgba(56,65,87,1);
                }
              }
            }

            .isAllday {
              margin-bottom: 30px;
              font-size: 14px;
              color:rgba(56,65,87,1);
              .ant-checkbox-wrapper {
                font-weight:bold;
                color:rgba(56,65,87,1);
              }
            }
    
            .tmdate {
              margin-bottom: 30px;
              .txt {
                width: 60px;
                height: 32px;
                line-height: 32px;
                font-size: 14px;
                color: rgba(56,65,87,1);
              }
              // 时间
              .rbox {
                width: calc(100% - 60px);
                .tmpicker {
                  width: 100%!important;
                  height: 30px;
                  background: rgba(255,255,255,1);
                  border-radius: 2px;
                  outline: 0;
                  border: 0;
                  text-align: left;
                  /deep/ .ant-input {
                    border: 0;
                    font-size: 14px;
                    font-weight: bold;
                    color: rgba(56,65,87,1);
                    padding: 4px 9px;
                  }
                }
              }
            }

            // 重复提醒
            .repeatTotal {
              .srday {
                margin-bottom: 30px;
                .txt {
                  width: 110px;
                  height: 32px;
                  line-height: 32px;
                  font-size: 14px;
                  color: rgba(56,65,87,1);
                }
                // 时间
                .rbox {
                  width: calc(100% - 110px);
                  .bto {
                    .lb {
                      width: 46%;
                      float: left;
                      margin-right: 10px;
                      margin-bottom: 10px;
                      .ipt {
                        width: 100%;
                        background:rgba(255,255,255,1);
                        border-radius:2px;
                        outline: 0;
                        border: 0;
                      }
                    }
                    .sel {
                      width: 48.5%;
                      float: left;
                    }
                  }
                }
              }
              // end
              .tmdate {
                margin-bottom: 30px;
                .txt {
                  width: 60px;
                  height: 32px;
                  line-height: 32px;
                  font-size: 14px;
                  color: rgba(56,65,87,1);
                }
                // 时间
                .rbox {
                  width: calc(100% - 60px);
                  .tmpicker {
                    width: 100%!important;
                    height: 30px;
                    background: rgba(255,255,255,1);
                    border-radius: 2px;
                    outline: 0;
                    border: 0;
                    text-align: left;
                    /deep/ .ant-input {
                      border: 0;
                      font-size: 14px;
                      font-weight: bold;
                      color: rgba(56,65,87,1);
                      padding: 4px 9px;
                    }
                  }
                }
              }
            }

            .notes {
              margin-bottom: 20px;
              .txt {
                width: 60px;
                height: 32px;
                line-height: 32px;
                font-size: 14px;
                color: rgba(56,65,87,1);
              }
              .rbox {
                width: calc(100% - 60px);
                .noteTextArea {
                  width: 100%;
                  height: 240px;
                  padding: 4px 9px;
                  background:rgba(255,255,255,1);
                  border-radius: 2px;
                  outline: 0;
                  border: 0;
                  font-size: 14px;
                  font-weight: bold;
                  color: rgba(56,65,87,1);
                  resize: none;
                }
              }
            }
            .reminders {
              height: 32px;
              line-height: 32px;
              margin-bottom: 20px;
              .txt {
                width: 100px;
                font-size: 14px;
                color: rgba(56,65,87,1);
              }
              .rbox {
                width: calc(100% - 100px);
                font-size: 14px;
                font-weight: bold;
                color: #1890FF;
                cursor: pointer;
              }
            }
            // 提醒
            .tixBox {
              margin-bottom: 30px;
              padding: 0px 0 0 0;
              .addbox {
                margin-bottom: 20px;
                .text {
                  height: 32px;
                  font-size:12px;
                  font-weight:bold;
                  color:rgba(24,144,255,1);
                }
                .itebox {
                  position: relative;
                  .lb {
                    width: 100px;
                    float: left;
                    margin-right: 10px;
                    .ipt {
                      width: 100px;
                      background:rgba(255,255,255,1);
                      border-radius:2px;
                      outline: 0;
                      border: 0;
                    }
                  }
                  .sel {
                    width: 100px;
                    float: left;
                  }
                  .deletes {
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    background: #fff;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 999;
                    cursor: pointer;
                    padding-top: 4px;
                    .pho {
                      width: 18px;
                      height: 18px;
                    }
                  }
                }
              }
            }
            .save {
              width: 120px;
              height: 30px;
              line-height: 30px;
              margin-bottom: 50px;
              background:rgba(24,144,255,1);
              border-radius: 2px;
              text-align: center;
              cursor: pointer;
              font-size: 14px;
              font-weight: 400;
              color: rgba(255,255,255,1);
              float: right;
            }
          }
          // email
          .aboutEmail {
            height: 530px;
            padding: 50px 30px;
            background: #F3F6FD;
            .boxed {
              width: 180px;
              height: 36px;
              line-height: 30px;
              text-align: center;
              background:rgba(255,255,255,1);
              border: 2px solid rgba(24,144,255,1);
              border-radius: 2px;
              font-size: 14px;
              color: rgba(24,144,255,1);
              margin-bottom: 20px;
              cursor: pointer;
              .pic {
                width: 16px;
                height: 16px;
                margin-right: 10px;
              }
            }
            .yours {
              .tit {
                font-size: 16px;
                font-weight: 600;
                color:rgba(44,52,74,1);
              }
              .list {
                .item {
                  padding: 10px;
                  margin-bottom: 1px;
                  background: #fff;
                  font-size: 14px;
                  color: rgba(24,144,255,1);
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  cursor: pointer;
                }
              }
            }
          }
        }
      
      }
      
      // 中间 Upcoming Follow-ups
      &.middleInfo {
        .ite {
          padding: 17px 20px;
          .title {
            font-size:16px;
            font-weight:bold;
            color:rgba(56,65,87,1);
            margin-bottom: 20px;
          }
          
          .list {
            .item {
              padding-top: 6px;
              background:rgba(255,255,255,1);
              border-radius:2px;
              margin-bottom: 10px;
              position: relative;
              .tobox {
                padding: 0 10px 5px;
                border-bottom: 1px solid #F3F6FD;
                .title {
                  font-size:14px;
                  font-weight:bold;
                  color:rgba(56,65,87,1);
                  margin-bottom: 10px;
                }

                .totla {
                  margin-bottom: 15px;
                  .time {
                    width: 135px;
                    font-size:14px;
                    color:rgba(56,65,87,1);
                    display: inline-block;
                  }
                  .note {
                    padding: 0 10px;
                    font-size:14px;
                    color:rgba(123,133,157,1);
                    display: inline-block;
                    position: relative;
                    &::before {
                      content: '';
                      width: 1px;
                      height: 14px;
                      background:rgba(56,65,87,1);
                      position: absolute;
                      top: 3px;
                      left: 0;
                      z-index: 999;
                    }
                  }
                }

                .type {
                  font-size:16px;
                  font-weight:bold;
                  text-decoration:underline;
                  color:rgba(24,144,255,1);
                }

              }
              .repbox {
                padding: 6px 10px;
                .rw {
                  margin-bottom: 2px;
                  .ltit {
                    display: inline-block;
                    width: 140px;
                    font-size:14px;
                    color:rgba(152,161,184,1);
                  }
                  .rcontent {
                    display: inline-block;
                    font-size:14px;
                    color:rgba(123,133,157,1);
                  }
                }
              }
              .edit {
                width: 60px;
                height:28px;
                line-height: 28px;
                text-align: center;
                background:rgba(255,255,255,1);
                border:1px solid rgba(243,246,253,1);
                border-radius:0px 2px 0px 2px;
                font-size:14px;
                color:rgba(56,65,87,1);
                position: absolute;
                top: 0;
                right: 0;
                z-index: 999;
              }
              .maskbox {
                width: 100%;
                height: 100%;
                background: rgba(76,84,103,.8);
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 999;
                opacity: 0;
                overflow-y: auto;
                padding: 10px;
                word-wrap: break-word;
                font-size: 14px;
                color:#fff;
              }
              &:hover {
                .maskbox {
                  opacity: 1;
                }
              }
            }
          }

          .noentries {
            padding: 60px 0;
            font-size: 16px;
            color: rgba(192,198,212,1);
            text-align: center;
          }
        }
      }

      // 右 Activity Summary Status
      &.rigActivity {
        padding-right: 0!important;
        margin-right: 0;
        .ite {
          padding: 17px 20px;
          .title {
            font-size:16px;
            font-weight:bold;
            color:rgba(56,65,87,1);
            margin-bottom: 30px;
          }
          .list {
            padding: 0 10px;
            display: flex;
            flex-wrap: wrap;
            .item {
              width: 150px;
              height: 110px;
              padding-top: 15px;
              background:rgba(255,255,255,1);
              border-radius:4px;
              margin: 0 10px 20px 0;
              text-align: center;
             
              // &:nth-child(3n),
              &:last-child {
                margin-right: 0;
              }
              .tit {
                font-size: 14px;
                color:rgba(250,84,28,1);
                margin-bottom: 6px;
              }
              .content {
                font-size:30px;
                color:rgba(70,70,70,1);
              }

              &.teshu {
                width: 230px;
                .tit {
                  color: rgba(56,158,13,1);
                }
                .content {
                  color: rgba(56,65,87,1);
                  .sp {
                    font-size: 14px;
                  }
                }
              }
            }
          }
          .noentries {
            padding: 50px 0;
            font-size: 16px;
            color: rgba(192,198,212,1);
            text-align: center;
          }
        }
      }
    }
  }
}

/deep/ .el-input__inner {
  font-size:14px;
  font-weight:bold;
  color:rgba(56,65,87,1);
}

.naves {
  height: 56px;
  .navtab {
    // width: 700px;
    margin-bottom: 15px;
    .box {
      .item {
        width:160px!important;
        height:36px;
        line-height: 36px;
        text-align: center;
        background: rgba(233,239,255,1);
        border-radius: 2px;
        font-size: 16px;
        color: rgba(123,133,157,1);
        margin-right: 10px;
        cursor: pointer;
        &:last-child {
          margin: 0;
        }
        &.active,
        &:hover {
          background:rgba(24,144,255,1);
          font-size: 16px;
          font-weight: bold;
          color: rgba(255,255,255,1);
        }
      }
      .el-col-3 {
        width: 15.7%;
      }
    }
  }
}

.pageAndSearch {
  margin-bottom: 20px!important;
  .lpage {
    // padding-left: 2px!important;
  }

  // 搜索框
  .ssboxes {
    .rsearch {
      float: right;
      .sript {
        width: 364px;
        height: 18px!important;
        line-height: 18px!important;
        padding: 0;
        background:rgba(255,255,255,1);
        border-radius: 2px;
        border: 5px solid #E9EFFF;
        /deep/ .el-input__inner {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          font-weight: 700;
          color: #384157;
        }
        /deep/ .el-input-group__append {
          width: 40px;
          height: 30px;
        }
        /deep/ .el-button--medium {
          width: 40px;
          height: 30px;
          padding: 0;
          background:rgba(24,144,255,1)!important;
          border-radius:2px;
          display: block;
          color: #fff!important;
        }
        [class^=el-icon-] {
          width: 15px;
          height:15px;
          background:#fff;
          border-radius: 50%;
        }
      }
    }
  }
}

.el-card__header {
  padding: 13px 20px;
}


// table
.nmbox {
  padding: 20px 0px;
  .nm {
    font-size: 14px;
    font-weight: bold;
    color: rgba(56,65,87,1);
    margin-bottom: 3px;
  }
  .contet {
    padding-left: 10px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(56,65,87,1);
    border-left: 2px solid #1890FF;
  }
}

// .table-notes {
//   height: 20px;
//   line-height: 20px;
//   padding: 20px 10px;
//   border-left: 2px solid #1890FF;
// }

// email
.emailModal {
  .tinfos {
   .shitem {
      margin-bottom: 30px;
      .ltxt {
        display: inline-block;
        width: 60px;
        font-size:14px;
        color:rgba(56,65,87,1);
      }
      .rshow {
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        color: rgba(56,65,87,1);
        .p {
          width: 400px;
          height: 30px;
          line-height: 30px;
          padding: 0 10px;
          background:#F3F6FD;
          border-radius:2px;
          border: 0;
        }
        .ant-input {
          width: 400px;
          height: 30px;
          background:#F3F6FD;
          border-radius:2px;
          border: 0;
          // border: 1px solid #1890FF;
        }
        .el-select .el-input__inner {
          width: 400px;
          height: 30px;
          background:#F3F6FD;
          border-radius:2px;
          border: 0;
        }

      }
   }
  }

  .dbody {
    margin-bottom: 30px;
    .title {
      font-size:14px;
      color:rgba(56,65,87,1);
      margin-bottom: 10px;
    }
    .conbox {
      height: 310px;
    }
  }
}

// 弹窗: 手机号
.mobileModal {
  padding: 10px 0;
  .tit {
    font-size: 16px;
    font-weight: bold;
    color: rgba(56,65,87,1);
    margin-bottom: 10px;
  }
  .mob {
    font-size: 16px;
    color: #36CFC9;
  }
}

.quill-editor {
  height: 220px;
}

// .el-card__body {
//   padding: 15px 90px 15px 30px;
// }

</style>
